बटन बदलें पर क्लिक करें

मैं अपने Button को हर बार रंग बदलने के लिए रंग बदलना चाहता हूं। लेकिन यह केवल पहले क्लिक पर रंग बदलता है।बटन बदलें पर क्लिक करें

मेरा मानना है कि समस्या setColor फ़ंक्शन में है। हर बार जब मैं Button पर क्लिक करता हूं, count 1 पर सेट हो जाता है। इसलिए जब भी मैं इसे 0 पर सेट करता हूं, तो यह अगले क्लिक पर 1 पर रीसेट हो जाता है। मैं यह कैसे तय करुं? क्या जावास्क्रिप्ट/एचटीएमएल में वैश्विक चर हैं जहां इसे आसानी से हल किया जाएगा?

<!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>

स्रोत

2014-11-14 user2456977

हाँ, इस कदम वर ग समारोह से पहले ount = 1 और यह वैश्विक होगा। – Bushrod

जावास्क्रिप्ट में वास्तव में वैश्विक चर हैं। आप scopes के बारे में अधिक जान सकते हैं, जो इस स्थिति में सहायक हैं।

आपका कोड ऐसा दिखाई दे सकता:

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

आशा इस मदद करता है।

स्रोत

2014-11-14 19:35:01

हर बार setColor हिट हो जाता है, तो आप संख्या = 1. सेट कर रहे हैं आप समारोह के दायरे से बाहर count निर्धारित करना होगा। उदाहरण:

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

}

स्रोत

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

स्रोत

2014-11-14 19:36:13