每次单击时将文本更改为

Question

所以我想这样做，而且我对 JavaScript 还很陌生：

1. 第一次按下按钮时，文本应更改为“您按下了按钮”。 （没有引号）。

2. 第二次按下按钮时，文本应更改为“您再次按下按钮”。 （没有引号）。

3. 第三次到第五次按下按钮时，文本应更改为“您按下按钮 [n] 次”。 （没有引号）。 [n] 应替换为按钮被按下的次数。

4. 如果按钮被按下六次或更多次，则文本应替换为“停止按下按钮”。 （没有引号）。

这是我目前拥有的：

function go() {
    // alert("alert!");
    var paragraph = document.getElementById("output");
    paragraph.innerHTML = "You pushed the button";
}

function go2() {
    var paragraph2 = document.getElementById("output")
    paragraph2.innerHTML = "You pushed the button (again)";
}

HTML 在这里：https://gyazo.com/8f24747521b539e2a68058716126279f

任何帮助:(请某人？？

Answer 1

你可以试试这样的：

JS

    var clicks = 0;
 function onClick() {
   clicks += 1;
   var message = "";
   if(clicks==1)
     { message = "You pushed the button.";}
   else if(clicks==2)
   {message ="You pushed the button (again).";}
    else if(clicks >= 6) //for 6 clicks and above
   {message ="Stop pushing the button.";}
   else
     {message = "You pushed the button " + clicks + " times.";}
   document.getElementById("message").innerHTML = message;

 };

html:

     <button type="button" id="buttonclick" onClick="onClick()">Click me</button>
<div id="message"></div>

示例：http://codepen.io/anon/pen/MaEExW

Answer 2

您可以使用变量来跟踪按钮被点击的次数：

var clicks = 0;

您可以使用数组作为字符串列表来更改按钮文本：

var buttonText = [
    "Push the button.",
    "You pushed the button.",
    "You pushed the button again.",
    "You pushed the button 3 times.",
    "You pushed the button 4 times.",
    "You pushed the button 5 times.",
    "Stop pushing the button."
];

您可以通过索引访问数组中的项目。索引号与按钮被点击的次数相同：

buttonText[0]; // Push the button.
buttonText[4]; // You pushed the button 4 times.
buttonText[clicks];

这是完整的 JavaScript 代码：

var clicks = 0;
var button = document.getElementById("myButton"); // You can change this.
var buttonText = [
    "Push the button.",
    "You pushed the button.",
    "You pushed the button again.",
    "You pushed the button 3 times.",
    "You pushed the button 4 times.",
    "You pushed the button 5 times.",
    "Stop pushing the button."
];
function buttonClicked() {
   clicks += 1;
   button.innerHTML = buttonText[clicks];
}
button.addEventListener("click", buttonClicked);

Answer 3

jsfiddle

创建一个简单的点击跟踪对象来计算用户点击次数。我已向此跟踪器添加了一个 getMessage，以根据点击次数提供正确的消息。

var myBtn = document.getElementById("myButton");

var clickTracker = {
count: 0,
getMessage: function () {
    var message;

    switch (this.count) {
        case 1:
            message = "You pushed the button";
            break;
        case 2:
            message = "You pushed the button (again).";
            break;
        case 3:
            //fall Through
        case 4:
            //fall Through
        case 5:
            //fall Through
            message = "You pushed the button " + this.count + " times.";
            break;
        default:
            message = "Stop pushing the button"
    }
    return message;
}
};


function processClick() {
   clickTracker.count++;
   document.getElementById("message").innerHTML = clickTracker.getMessage();
}

myBtn.addEventListener("click", processClick);

<button id="myButton">Click Me</button>
<p id="message"></p>