堆栈内存溢出
  简体   繁体   English

如何更改文本的颜色，并在javascript中单击4次按钮时停止

[英]How to change color of text and stop when clicked the button with 4 times in javascript

 原文  2016-10-20 08:50:26  3   8    javascript/ html

问题描述

I am doing basic javascript that allow user to click the button for changing the colour of text; 我正在做基本的javascript，允许用户点击按钮来改变文字的颜色; but, when use clicked 4times , the button does not change colour. 但是，当使用点击4次时，按钮不会改变颜色。

Here is my code of changing color. 这是我改变颜色的代码。 I do not know how to stop with 4 times. 我不知道怎么停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>

Thanks all 谢谢大家

8 个解决方案

解决方案1
 1  2016-10-20 08:56:37

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

解决方案2
 1  2016-10-20 08:57:17

You just have to set a counter outside the function 你只需要在函数外面设置一个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>

解决方案3
 1  2016-10-20 08:57:47

Use nbr_clicks variable to count the clicks and max_clicks to set max clicks allowed then add a condition in the start of your function : 使用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>

解决方案4
 0  2016-10-20 08:59:13

Just add counter. 只需添加计数器。 

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

解决方案5
 0  2016-10-20 09:02:31

You can check the odd and even click by % 2 and increasing status ,also can check that 4 times click. 您可以通过% 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>

解决方案6
 0  2016-10-20 09:14:12

 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>

解决方案7
 0  2016-10-20 09:37:50

status = 0;
function changeColour(){
    getText = document.getElementById("text");
    if(status < 4) {
        getText.style.color = (getText.style.color==="blue")?'red':'blue';
        status = status++;
    }
}

解决方案8
 0  2016-10-20 09:49:51

Just a new working and shorter answer with % operator 使用%运算符只是一个新的工作和更短的答案 

 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.

相关问题 Javascript 单击时如何更改按钮的颜色？ - Javascript how to change the color of a button when clicked? 仅使用Javascript / HTML单击时如何更改按钮的文本和颜色 - How to change text and color of a button when it is clicked using Javascript/HTML only Javascript：<a>单击按钮时如何更改标签的颜色</a> - Javascript: how to change <a> tag's color when button is clicked 使用 javascript 单击时更改按钮的颜色 - Change the color of a button when clicked with javascript 单击时以及单击其他按钮时如何更改按钮的颜色 - How to change the color of a button when clicked, and when other button is clicked 在 JavaScript 中单击提交按钮时如何更改段落的文本 - How to change text of a paragraph when submit button is clicked in JavaScript 使用JavaScript单击时更改按钮上的文本 - Change text on button when clicked with JavaScript 如何在单击时更改文本的颜色 - How to change color of text when it is clicked 单击元素时如何更改文本颜色 - how to change text color when clicked on element 如何使按钮在单击时改变颜色，然后在单击其他按钮时变回其原始颜色？ - How to make a button change color when clicked and then change back to its original color when a different button is clicked?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM