So i made this button, and i made the description text change from

{description}

to "No..." upon clicking. This is what i made:

function changeText(txt){
    document.getElementById('name').innerHTML = txt;
}

<p> 
    <b id='name'>{description}</b>.
</p>
<input type='image' 
    onclick='changeText("No...")' 
    src='.png' 
    style="margin-left: 540px; margin-bottom: 20px; position: absolute; outline: none;"/>

If you want, you can view what i did on //

I tried to make the description text change another time upon clicking another one time on the same button, so i tried adding another onClick, to make the description text change to "Another text" the next time you click the button.

function changeText(txt){
    document.getElementById('name').innerHTML = txt;
}

<p> 
    <b id='name'>{description}</b>. 
</p>
<input type='image' 
    onclick='changeText("No...")';
    onclick='changeText("Another text")';src='.png'
    style="margin-left: 540px; margin-bottom: 20px; position: absolute; outline: none;" />

I tested it, and it didn't work. Please, is it possible to make a JavaScript button that changes the text to different texts every time it is clicked?

So far, I've only been able two make the text change once.

So i made this button, and i made the description text change from

{description}

to "No..." upon clicking. This is what i made:

function changeText(txt){
    document.getElementById('name').innerHTML = txt;
}

<p> 
    <b id='name'>{description}</b>.
</p>
<input type='image' 
    onclick='changeText("No...")' 
    src='http://i.imgur./4y6bzH9.png' 
    style="margin-left: 540px; margin-bottom: 20px; position: absolute; outline: none;"/>

If you want, you can view what i did on /http://yosougay.tumblr./

I tried to make the description text change another time upon clicking another one time on the same button, so i tried adding another onClick, to make the description text change to "Another text" the next time you click the button.

function changeText(txt){
    document.getElementById('name').innerHTML = txt;
}

<p> 
    <b id='name'>{description}</b>. 
</p>
<input type='image' 
    onclick='changeText("No...")';
    onclick='changeText("Another text")';src='http://i.imgur./4y6bzH9.png'
    style="margin-left: 540px; margin-bottom: 20px; position: absolute; outline: none;" />

I tested it, and it didn't work. Please, is it possible to make a JavaScript button that changes the text to different texts every time it is clicked?

So far, I've only been able two make the text change once.

• javascript
• jquery
• html
• css
• button

Share Improve this question Follow edited May 15, 2014 at 7:20 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked May 15, 2014 at 7:17 shasha 11322 gold badges55 silver badges1616 bronze badges 9

• Why you need to change the text each time ?? – Jenz Commented May 15, 2014 at 7:23
• from where you are getting new text? or you toggling between "No.." and "Another text"? – Bhushan Kawadkar Commented May 15, 2014 at 7:23
• @jenz i need it because i want to make it seem like a dialogue box where the text changes every time you click the button. I've only succeded in making the text change once though, and upon one click. – sha Commented May 15, 2014 at 7:25
• @BhushanKawadkar sorry im not really sure what you're asking :/ – sha Commented May 15, 2014 at 7:26
• @Yuki DEMO - this is my version. Something like that makes more sense to me. – Ruddy Commented May 15, 2014 at 7:29

 |  Show 4 more ments

5 Answers 5

Sorted by: Reset to default 4

Try something like this: http://jsfiddle/54pp2/2/

<input id="click" type="button" value="click" />
<label id="test">Test</label>


$(document).ready(function () {
    var textArray = [];
    textArray[0] = 'test 1';    
    textArray[1] = 'test 2';    
    textArray[2] = 'test 3';    
    textArray[3] = 'test 4';    

    var idx = 0;
    $('input#click').on('click', function(){
        idx++;
        var newidx = idx % textArray.length;
        $('label#test').text(textArray[newidx]);
    });
});

Sure you can.

You can only bind one click listener that way. Duplicating the attribute onclick will only override the first one, not provide two click listeners.

What you want to do is to handle the "different text every time" in you single onclick listener.

<script> 
  var txts = ["first", "second", "third"]
  var counter = 0;
  function changeText() {
    document.getElementById('name').innerHTML = txts[counter%3];
    counter++;
  }
</script>

<p> 
    <b id='name'>{description}</b>.
</p>
<input type='image' 
       onclick='changeText()' 
       src='http://i.imgur./4y6bzH9.png' 
       style="margin-left: 540px;
              margin-bottom: 20px;
              position: absolute; 
              outline:  none;"/>

I think this what you want

<script>
<!-- 

 $(document).ready(function(){

     var textarray ={"No...","Another Text"};
     var count = 0;
     $('input[type="image"]').click(function(){
         $('#name').text(textarray[count]);
         count = count==0?1:0;
     });
 });

 // -->
 </script>
 <p> <b id='name'>{description}</b>. </p>
 <input type='image' onclick='changeText("No...")' src='http://i.imgur./4y6bzH9.png'
 style="margin-left:540px; margin-bottom:20px; position:absolute; outline:none;"/>
 <br /><br />

You could keep track of how many times the button has been clicked from inside javascript.

<script>
var clicked = 0;
function changeText(){
    if (clicked == 0) {
         document.getElementById('name').innerHTML = "No...";
    }
    else if (clicked == 1) {
         document.getElementById('name').innerHTML = "Another text";
    }
    clicked++;
}
</script>

Notice how I removed the argument from changeText() as well.

Fiddle

My suggestion is to change the onclick to onclick='changeText()'.

Store the texts in an array, and use a count property on the element. This will also move to the first text and repeat, on the third click.

var texts = [
    'No',
    'Another text'
];

function changeText(){
    var elem  = document.getElementById('name');
    if(typeof elem.count == 'undefined'){
        elem.count = 0;   
    } else {
        elem.count++;   
    }

    if(elem.count == texts.length){
        elem.count = 0;   
    }

    elem.innerHTML = texts[elem.count];
}