Thay đổi màu nút trên Click

Tôi muốn Button để thay đổi màu 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.Thay đổi màu nút trên Click

Tôi tin rằng sự cố nằm trong hàm setColor. Mỗi lần tôi nhấp vào Button, count được đặt thành 1. Vì vậy, ngay cả khi tôi đặt thành 0, nó được đặt lại thành 1 trên lần nhấp tiếp theo. Làm thế nào để sửa lỗi này? 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?

<!DOCTYPE html> 
<html> 
<head> 

<script> 
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; 
    } 

} 
</script> 
</head> 

<body> 

<input type="button" id="button" value = "button" style= "color:white" onclick="setColor('button', '#101010')";/> 

</body> 
</html>

Nguồn

2014-11-14 user2456977

Vâng, di chuyển var c ount = 1 đến trước hàm và nó sẽ là toàn cục. – Bushrod

Có các biến toàn cầu thực sự trong javascript. Bạn có thể tìm hiểu thêm về scopes, điều này rất hữu ích trong trường hợp này.

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

<script> 
    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; 
     } 
    } 
</script>

Hope this helps.

Nguồn

2014-11-14 19:35:01

Mỗi lần setColor bị đánh, bạn đang thiết count = 1. Bạn sẽ cần phải xác định count ngoài phạm vi của hàm. Ví 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; 
    } 

}

Nguồn

2014-11-14 19:30:28

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 
    */ 
} 


<input 
    type="button" 
    id="button" 
    value="button" 
    style="color:white" 
    onclick="setColor(event)"; 
    data-count="1" 
/>

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; 
} 

<input 
    type="button" 
    id="button" 
    value="button" 
    style="color:white" 
    onclick="setColor(event)" 
/>

([conditional (ternary) operator])

Example-1

Example-2

Nguồn

2014-11-14 19:36:13

Thay đổi màu nút trên Click

Trả lời

Các vấn đề liên quan