點擊切換按鈕顏色

在這裏，我寫了一個JavaScript將按鈕的顏色更改爲綠色，當點擊一次，並且當我再次單擊該按鈕時，它的顏色應該變回橙色。按鈕的默認顏色是橙色。我已給出rgb顏色值。但是，當我點擊按鈕時，它的顏色會從橙色變爲綠色，而當我再次單擊它時，它的顏色保持綠色不會變回橙色。請幫我解決這個問題。點擊切換按鈕顏色

<script> 
function colorchange(id) 
{ 

    var background = document.getElementById(id).style.background; 

    if(background = "rgb(255,145,0)") 
    { 
    document.getElementById(id).style.background = "rgb(26,255,0)"; 
    } 
    if(background == "rgb(26,255,0)") 
    { 
    document.getElementById(id).style.background = "rgb(255,145,0)"; 
    } 

} 
</script>

下面是輸入按鈕的HTML代碼

<input type="button" name="Ignore Select" value="Ignore Select" id="select" onclick="colorchange('select')" style="background:rgb(255,145,0);"/> 
<input type="button" name="Ignore Delete" value="Ignore Delete" id="select1" onclick="colorchange('select1');" style="background:rgb(255,145,0);"/> 
<input type="button" name="Ignore Insert" value="Ignore Insert" id="select2" onclick="colorchange('select2');" style="background:rgb(255,145,0);"/> 
<input type="button" name="Ignore Update" value="Ignore Update" id="select3" onclick="colorchange('select3');" style="background:rgb(255,145,0);"/> 
<input type="button" name="Ignore Sleep" value="Ignore Sleep" id="select4" onclick="colorchange('select4');" style="background:rgb(255,145,0);"/>

來源

2014-03-05 VIJU

試試這個代碼http://jsfiddle.net/ku2Ye/ 2/ – Girish

應該if(background == "rgb(255,145,0)")

使用比較運算符==代替分配=

function colorchange(id) { 

    var background = document.getElementById(id).style.backgroundColor; 
    if (background == "rgb(255, 145, 0)") { 
     document.getElementById(id).style.background = "rgb(26,255,0)"; 
    } else { 
     document.getElementById(id).style.background = "rgb(255,145,0)"; 
    } 

}

演示：Fiddle

由於jQuery的標籤被用來

<input type="button" name="Ignore Select" value="Ignore Select" id="select" class="select" /> 
<input type="button" name="Ignore Delete" value="Ignore Delete" id="select1" class="select" /> 
<input type="button" name="Ignore Insert" value="Ignore Insert" id="select2" class="select" /> 
<input type="button" name="Ignore Update" value="Ignore Update" id="select3" class="select" /> 
<input type="button" name="Ignore Sleep" value="Ignore Sleep" id="select4" class="select" />

然後

.select { 
    background:rgb(255,145,0); 
} 
.select.highlight { 
    background:rgb(26, 255, 0); 
}

和

jQuery(function ($) { 
    $('.select').click(function() { 
     $(this).toggleClass('highlight') 
    }) 
})

演示：Fiddle

來源

2014-03-05 07:10:47

是的，但不行：http://jsfiddle.net/ku2Ye/？ – Felix

@Felix是 - http://jsfiddle.net/arunpjohny/fL7X8/1/ –

不，它不會切回顏色。 – Felix

你應該comparison運營商，而不是運營商assignment

if(background = "rgb(255,145,0)")

到

if(background == "rgb(255,145,0)")

<script> 
    function colorchange(id) 
{ 

    var background = document.getElementById(id).style.backgroundColor; 

    if(background == "rgb(255, 145, 0)") 
    { 
    document.getElementById(id).style.backgroundColor = "rgb(26,255,0)"; 
    } 
    if(background == "rgb(26, 255, 0)") 
    { 
    document.getElementById(id).style.backgroundColor = "rgb(255,145,0)"; 
    } 

} 
    </script>

DEMO

來源

2014-03-05 07:13:38 Girish

爲什麼不使用CSS背景色？ http://jsfiddle.net/

HTML：

<input type="button" name="Ignore Select" value="Ignore Select" id="select" onclick="colorchange('select')" class="classA" /> 

    <script> 
     function colorchange(id) 
    { 
     var el = document.getElementById(id); 
     var currentClass = el.getAttribute("class"); 
     if(currentClass == 'classA') 
     { 
      el.setAttribute("class", "classB"); 
     } else { 
     el.setAttribute("class", "classA"); 
     } 

    } 
    </script>

CSS：

.classA { 
    background:rgb(255,145,0); 
} 

.classB { 
    background:rgb(26,255,0); 
}

來源

2014-03-05 07:18:36 Marcel

JS FIDDLE

的Jquery：

$(":button").on('click', function() { 
    var gValue = $(this).attr('class'); 
    if (gValue == 'orange') { 
     $(this).removeClass("orange"); 
     $(this).addClass("red"); 
    } else { 
     $(this).removeClass("red"); 
     $(this).addClass("orange"); 
    } 
});

CSS：

.red { 
    background-color:red; 
} 
.orange { 
    background-color:orange; 
}

來源

2014-03-05 07:28:09

我會寫這樣的：

哪裏BTN是你的按鈕

var background = document.getElementById(id).style.background; 
var btn = addEventListener("click", function(){ 
    if(background = "rgb(255,145,0)"){ 
     document.getElementById(id).style.background = "rgb(26,255,0)"; 
    } 
    else 
    { 
     document.getElementById(id).style.background = "rgb(255,145,0)"; 
    } 
});

來源

2017-06-15 07:40:20

點擊切換按鈕顏色

回答

相關問題