CODEWITHSUNDEEP
javascripthtml
Jeremy Eisner
Jeremy Eisner

Reputation: 51

How to make a button create a different text every time it is pushed?

How would I be able to create a button which onclick provides something like the following:

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

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

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

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

I am completely lost here. Is there a way this can be done using the if/else statements? It seems so simple yet I don't even know where to start. Thanks for the help.

Upvotes: 0

Views: 2246

Answers (5)

Lucky Chingi
Lucky Chingi

Reputation: 2258

<script>
var i = 0;
$(document).ready(function() {
  $("#button").click(function() {

    i = i + 1;
    switch (i) {
      case 1:
        alert('You pressed the button');
        return;
      case 2:
        alert('You pressed the button Twice ');
        return;
      default:
        alert('You pressed the button ' + i + ' times');
        return;
    }
  });
});</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id=button>Button
  </button>

Here's the code.

Upvotes: 0

Max
Max

Reputation: 2806

You will want to keep track of the amount of times the button has been clicked. clickCount will be increased each time a click event is triggered. Each time the button is clicked, you run a certain block of code depending on your wanted range.

HTML:

<div id="update">You should probably click the button</div>
<input id="button" type="button" value="Click!"/>

Javascript:

var clickCount = 0;
var update = document.getElementById('update');

document.getElementById('button').onclick = function() {
    clickCount++;
    if(clickCount===1) {
        update.innerHTML = 'You pushed the button';
    } else if(clickCount===2) {
        update.innerHTML = 'You pushed the button again';
    } else if(clickCount>=3 && clickCount<=5) {
        update.innerHTML = `You pushed the button ${clickCount} times`;
    } else if(clickCount>6) {
        update.innerHTML = 'Stop pushing the button';
    }
};

Code in action:

Here is a demo

Upvotes: 0

guest271314
guest271314

Reputation: 1

Try creating an array containing text to be displayed , use Array.prototype.shift() to display items within array if array .length is greater than 1 , else display remaining item within array

var arr = ["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."];

document.querySelector("button").onclick = function() {
  this.innerHTML = arr.length > 1 ? arr.shift() : arr[0]
}
<button>click</button>

Upvotes: 1

brk
brk

Reputation: 50291

Hope this will be helpful

<button type = 'button' id ='clickB'>Click me </button>

With only javascript

var x = document.getElementById('clickB');
var counter = 1;

x.addEventListener('click',function(){
  if(counter == 1){
    alert('You clicked me');
  }
    else if(counter ==2){
    alert('You clicked me again');
    }
    else{
        alert('You clicked me ' +counter+'times');
    }
    counter++;
},false)

jsfiddle

Upvotes: 0

PC3TJ
PC3TJ

Reputation: 852

yes, the simplest way would be to simply put your text values in an array then call the text from the array such as. Or if you prefer if satatements you can use these after implementing a counter integer. 

var n=0;
var textList=["You Clicked The Button", "You Clicked The Button Again", "You Clicked The Button 3 Times", "You Clicked The Button 4 Times"];

function buttonClick(btn){
    btn.innerHTML=textList[n];
    n++;
  
  
  }

Upvotes: 0

Related Questions