[英]Toggle button color on click
Here I have written a JavaScript
to change color of button to green when clicked once and when I click the button again its color should change back to orange color. 在这里,我编写了一个
JavaScript
,可以在单击一次按钮时将按钮的颜色更改为绿色,而当我再次单击按钮时,其颜色应重新更改为橙色。 The default color of button is orange. 按钮的默认颜色是橙色。 I have given the
rgb
values of color. 我给了颜色的
rgb
值。 But, when I click the button its color changes from orange to green and when I click it again its color remains green doesn't change back to orange. 但是,当我单击该按钮时,其颜色从橙色变为绿色,而再次单击时,其颜色仍为绿色,而不会变回橙色。 please help me to fix this.
请帮助我解决此问题。
<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>
Here is the HTML code for input button 这是输入按钮的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);"/>
it should be if(background == "rgb(255,145,0)")
应该是
if(background == "rgb(255,145,0)")
use comparison operator ==
instead of assignment =
使用比较运算符
==
代替赋值=
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)";
}
}
Since jQuery tag was used 由于使用了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" />
then 然后
.select {
background:rgb(255,145,0);
}
.select.highlight {
background:rgb(26, 255, 0);
}
and 和
jQuery(function ($) {
$('.select').click(function () {
$(this).toggleClass('highlight')
})
})
Jquery: 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: CSS:
.red {
background-color:red;
}
.orange {
background-color:orange;
}
You should comparison
operator instead of assignment
operator 您应该
comparison
而不是assignment
运算符
if(background = "rgb(255,145,0)")
to 至
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>
Why not use css for the background color? 为什么不使用CSS作为背景色? http://jsfiddle.net/
http://jsfiddle.net/
Html: 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: CSS:
.classA {
background:rgb(255,145,0);
}
.classB {
background:rgb(26,255,0);
}
I would write it like this: 我会这样写:
Where btn is your button 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)";
}
});
My Approach : 我的方法:
var eButton = document.querySelectorAll("button");
var isPink = false;//using white and pink in this example
eButton.addEventListener("click", function(){
if(isPink){
document.body.style.background = "white";
}
else{
document.body.style.background = "pink";
}
isPink = !isPink; //switches between true and false
});
OR 要么
Write css for the background and use the classList property 为背景编写CSS并使用classList属性
.pink{
background : pink;
}
JS JS
eButton.addEventListener("click", function(){
document.body.classList.toggle("pink");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.