改变文本每次我点击

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

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>

Answer 3

您可以使用一个变量来跟踪的按钮被点击了多少次：

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