Hướng dẫn change button onclick javascript - nút thay đổi onclick javascript

17

Nội dung chính

  • Làm cách nào để thay đổi màu nhấp chuột của tôi?
  • Làm cách nào để thay đổi màu nền khi tôi nhấp vào nút?
  • Làm cách nào để thay đổi màu của nút nhấp vào CSS?
  • Làm thế nào để bạn tạo kiểu cho một nút trong JavaScript?

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.Learn more.
Learn more.

Tôi muốn Button của tôi thay đổi màu sắc mỗi khi tôi nhấp vào nó. Nhưng nó chỉ thay đổi màu sắc trên nhấp chuột đầu tiên.

Tôi tin rằng vấn đề là trong hàm setColor. Mỗi lần tôi nhấp vào Button,


    var count = 1;
    function setColor[btn, color] {
        var property = document.getElementById[btn];
        if [count == 0] {
            property.style.backgroundColor = "#FFFFFF"
            count = 1;        
        }
        else {
            property.style.backgroundColor = "#7FFF00"
            count = 0;
        }
    }

1 sẽ được đặt thành 1. Vì vậy, ngay cả khi tôi đặt nó thành 0, nó sẽ được đặt lại thành 1 trong lần nhấp tiếp theo. Làm cách nào để khắc phục điều này? Có các biến toàn cầu trong JavaScript/HTML nơi điều này sẽ dễ dàng được giải quyết?






function setColor[btn, color]{
    var count=1;
    var property = document.getElementById[btn];
    if [count == 0]{
        property.style.backgroundColor = "#FFFFFF"
        count=1;        
    }
    else{
        property.style.backgroundColor = "#7FFF00"
        count=0;
    }

}









Đã hỏi ngày 14 tháng 11 năm 2014 lúc 19:26Nov 14, 2014 at 19:26Nov 14, 2014 at 19:26

user2456977user2456977user2456977user2456977

3.66613 Huy hiệu vàng45 Huy hiệu bạc86 Huy hiệu Đồng13 gold badges45 silver badges86 bronze badges13 gold badges45 silver badges86 bronze badges

1

Thực sự có các biến toàn cầu trong JavaScript. Bạn có thể tìm hiểu thêm về phạm vi, rất hữu ích trong tình huống này.

Mã của bạn có thể trông như thế này:


    var count = 1;
    function setColor[btn, color] {
        var property = document.getElementById[btn];
        if [count == 0] {
            property.style.backgroundColor = "#FFFFFF"
            count = 1;        
        }
        else {
            property.style.backgroundColor = "#7FFF00"
            count = 0;
        }
    }

Hi vọng điêu nay co ich.

Đã trả lời ngày 14 tháng 11 năm 2014 lúc 19:35Nov 14, 2014 at 19:35Nov 14, 2014 at 19:35

0

1.

function setColor[e] {
  var target = e.target,
      count = +target.dataset.count;

   target.style.backgroundColor = count === 1 ? "#7FFF00" : '#FFFFFF';
   target.dataset.count = count === 1 ? 0 : 1;
   /* 

   [] : ? - this is conditional [ternary] operator - equals 

   if [count === 1] {
      target.style.backgroundColor = "#7FFF00";
      target.dataset.count = 0;
   } else {
      target.style.backgroundColor = "#FFFFFF";
      target.dataset.count = 1;
   } 
   target.dataset - return all "data attributes" for current element, 
   in the form of object, 
   and you don't need use global variable in order to save the state 0 or 1
  */ 
}



2.

function setColor[e] {
   var target = e.target,
       status = e.target.classList.contains['active'];

   e.target.classList.add[status ? 'inactive' : 'active'];
   e.target.classList.remove[status ? 'active' : 'inactive']; 
}

.active {
  background-color: #7FFF00;  
}

.inactive {
  background-color: #FFFFFF;
}


[[Toán tử có điều kiện [ternary]]]


    var count = 1;
    function setColor[btn, color] {
        var property = document.getElementById[btn];
        if [count == 0] {
            property.style.backgroundColor = "#FFFFFF"
            count = 1;        
        }
        else {
            property.style.backgroundColor = "#7FFF00"
            count = 0;
        }
    }

0

    var count = 1;
    function setColor[btn, color] {
        var property = document.getElementById[btn];
        if [count == 0] {
            property.style.backgroundColor = "#FFFFFF"
            count = 1;        
        }
        else {
            property.style.backgroundColor = "#7FFF00"
            count = 0;
        }
    }

1

Đã trả lời ngày 14 tháng 11 năm 2014 lúc 19:36Nov 14, 2014 at 19:36Nov 14, 2014 at 19:36

Oleksandr T.oleksandr T.Oleksandr T.Oleksandr T.

74,8K17 Huy hiệu vàng166 Huy hiệu bạc143 Huy hiệu đồng17 gold badges166 silver badges143 bronze badges17 gold badges166 silver badges143 bronze badges

0

Mỗi khi setColor bị truy cập, bạn đang cài đặt Count = 1. Bạn sẽ cần xác định


    var count = 1;
    function setColor[btn, color] {
        var property = document.getElementById[btn];
        if [count == 0] {
            property.style.backgroundColor = "#FFFFFF"
            count = 1;        
        }
        else {
            property.style.backgroundColor = "#7FFF00"
            count = 0;
        }
    }

1 ngoài phạm vi của hàm. Thí dụ:

var count=1;
function setColor[btn, color]{
    var property = document.getElementById[btn];
    if [count == 0]{
        property.style.backgroundColor = "#FFFFFF"
        count=1;        
    }
    else{
        property.style.backgroundColor = "#7FFF00"
        count=0;
    }

}

Đã trả lời ngày 14 tháng 11 năm 2014 lúc 19:30Nov 14, 2014 at 19:30Nov 14, 2014 at 19:30

KJ Pricekj GiáKJ PriceKJ Price

5.6943 Huy hiệu vàng20 Huy hiệu bạc33 Huy hiệu Đồng3 gold badges20 silver badges33 bronze badges3 gold badges20 silver badges33 bronze badges

0

Sử dụng jQuery, hãy thử điều này. Nếu id nút của bạn là ID = clickMe

$["clickme"].on['çlick', function[]{

  **$[this].css['background-color', 'grey'];
.......

Đã trả lời ngày 9 tháng 7 năm 2020 lúc 14:50Jul 9, 2020 at 14:50Jul 9, 2020 at 14:50

Làm cách nào để thay đổi màu nhấp chuột của tôi?

Để thay đổi màu nền của một phần tử trên nhấp chuột:...

Thêm trình nghe sự kiện nhấp vào phần tử ..

Gán đối tượng sự kiện cho một biến trong hàm ..

Đặt sự kiện. Mục tiêu. Phong cách. thuộc tính boardpresscolor cho màu nền cụ thể ..

Làm cách nào để thay đổi màu nền khi tôi nhấp vào nút?

Sử dụng thuộc tính HTML DOM Style BackgroundColor để thay đổi màu nền sau khi nhấp vào nút.Thuộc tính này được sử dụng để đặt màu nền của một phần tử.Ví dụ: Ví dụ này thay đổi màu nền với sự trợ giúp của JavaScript.Sau khi nhấp vào nút? to change the background color after clicking the button. This property is used to set the background-color of an element. Example: This example changes the background color with the help of JavaScript. after clicking the button ? to change the background color after clicking the button. This property is used to set the background-color of an element. Example: This example changes the background color with the help of JavaScript. after clicking the button ?

Làm cách nào để thay đổi màu của nút nhấp vào CSS?

Làm thế nào để bạn tạo kiểu cho một nút trong JavaScript?use the CSS background-color property and give it a value of a color of your taste. In the .button selector, you use background-color:#0a0a23; to change the background color of the button.

Làm thế nào để bạn tạo kiểu cho một nút trong JavaScript?

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.Learn more.

Tôi muốn Button của tôi thay đổi màu sắc mỗi khi tôi nhấp vào nó. Nhưng nó chỉ thay đổi màu sắc trên nhấp chuột đầu tiên.

Tôi tin rằng vấn đề là trong hàm setColor. Mỗi lần tôi nhấp vào Button,


    var count = 1;
    function setColor[btn, color] {
        var property = document.getElementById[btn];
        if [count == 0] {
            property.style.backgroundColor = "#FFFFFF"
            count = 1;        
        }
        else {
            property.style.backgroundColor = "#7FFF00"
            count = 0;
        }
    }

1 sẽ được đặt thành 1. Vì vậy, ngay cả khi tôi đặt nó thành 0, nó sẽ được đặt lại thành 1 trong lần nhấp tiếp theo. Làm cách nào để khắc phục điều này? Có các biến toàn cầu trong JavaScript/HTML nơi điều này sẽ dễ dàng được giải quyết?

Đã hỏi ngày 14 tháng 11 năm 2014 lúc 19:26Nov 14, 2014 at 19:26

3.66613 Huy hiệu vàng45 Huy hiệu bạc86 Huy hiệu Đồng13 gold badges45 silver badges86 bronze badges

Thực sự có các biến toàn cầu trong JavaScript. Bạn có thể tìm hiểu thêm về phạm vi, rất hữu ích trong tình huống này.

Mã của bạn có thể trông như thế này:

Bài Viết Liên Quan

Chủ Đề