[英]How to change color of text and stop when clicked the button with 4 times in javascript
我正在做基本的javascript,允许用户点击按钮来改变文字的颜色; 但是,当使用点击4次时,按钮不会改变颜色。
这是我改变颜色的代码。 我不知道怎么停4次。
status = 1; function changeColour(){ getText = document.getElementById("text"); if(status==1) { getText.style.color = 'blue'; status = 2; }else if(status==2) { getText.style.color = 'red'; status = 1; } }
<h1 id= "text" align = "center"><b>Hello World</b></h1> <button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button>
谢谢大家
var status = 1;
var counter = 0;
function changeColour(){
counter ++;
if (counter < 4) {
getText = document.getElementById("text");
if(status==1) {
getText.style.color = 'blue';
status = 2;
}else if(status==2) {
getText.style.color = 'red';
status = 1;
}
}
}
你只需要在函数外面设置一个counter
var status = 1; var counter = 0; function changeColour() { if (counter == 4) return; counter++; getText = document.getElementById("text"); if (status == 1) { getText.style.color = 'blue'; status = 2; } else if (status == 2) { getText.style.color = 'red'; status = 1; } }
<html> <head> <title>Hello World</title> </head> <body> <h1 id="text" align="center"><b>Hello World</b></h1> <button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button> </body> </html>
使用nbr_clicks
变量计算点击次数,使用max_clicks
设置允许的最大点击次数,然后在函数开头添加条件:
status = 1; nbr_clicks = 0; max_clicks = 4; function changeColour(){ if(nbr_clicks<max_clicks) { nbr_clicks++; getText = document.getElementById("text"); if(status==1) { getText.style.color = 'blue'; status = 2; }else if(status==2) { getText.style.color = 'red'; status = 1; } } }
<h1 id= "text" align = "center"><b>Hello World</b></h1> <button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button>
只需添加计数器。
<html> <head> <title>Hello World</title> <script language= "javascript"> var status = 1; var count = 0; function changeColour(){ getText = document.getElementById("text"); if(count<4){ if(status==1) { getText.style.color = 'blue'; status = 2; }else if(status==2) { getText.style.color = 'red'; status = 1; } count++; }else{ alert("You already clicked 4 times."); } } </script> </head> <body> <h1 id= "text" align = "center"><b>Hello World</b></h1> <button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button> </body> </html>
您可以通过%
2和增加status
检查奇数和偶数点击,也可以检查4次点击。
<script language= "javascript">
status = 1;
function changeColour(){
getText = document.getElementById("text");
if(status % 2 != 0) {
getText.style.color = 'blue';
status++;
}else if(status == 4) {
getText.style.color = '';
status = 1;
}
else {
getText.style.color = "red";
status++;
}
}
</script>
status = 1,clk = 0 function changeColour(){ if(clk<4)clk++; else return; getText = document.getElementById("text"); if(status==1) { getText.style.color = 'blue'; status = 2; }else if(status==2) { getText.style.color = 'red'; status = 1; } }
<h1 id= "text" align = "center"><b>Hello World</b></h1> <button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button>
status = 0;
function changeColour(){
getText = document.getElementById("text");
if(status < 4) {
getText.style.color = (getText.style.color==="blue")?'red':'blue';
status = status++;
}
}
使用%
运算符只是一个新的工作和更短的答案
var counter = 1; var MAX_CLICKS = 4; function changeColour() { var textElem = document.getElementById("text"); if (counter < MAX_CLICKS ) { textElem.style.color = (counter % 2)? 'blue' : 'red'; counter++; } }
<h1 id="text" align="center"><b>Hello World</b></h1> <button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.