change text to everytime I click

问题:

So I want to do this, and I'm fairly new to JavaScript:

1. The first time the button is pushed, the text should be changed to "You pushed the button." (no quotes).

2. The second time the button is pushed, the text should be changed to "You pushed the button (again)." (no quotes).

3. The third through fifth times the button is pressed, the text should be changed to "You pushed the button [n] times." (no quotes). [n] should be replaced by the number of times the button has been pressed.

4. If then button is pressed six or more times, the text should be replaced with "Stop pushing the button." (no quotes).

This is what I currently have:

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

THE HTML IS HERE : https://gyazo.com/8f24747521b539e2a68058716126279f

any helps :( please someone??

回答1:

you can try something like this:

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>

example: http://codepen.io/anon/pen/MaEExW

回答2:

You can use a variable to keep track of how many times the button was clicked:

var clicks = 0;

You can use an array as a list of strings for changing the button text:

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."
];

You can access the items from the array by index. The index number is the same as how many times the button was clicked:

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

Here is the full JavaScript code:

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

回答3:

jsfiddle

Create a simple click tracker object which counts user clicks. I have added a getMessage to this tracker to provide the correct message based on what the click count is.

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>