改變文本每次我點擊

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