Button onclick more than once, different text in javascript

Question

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.com/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.com/

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.com/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.

from where you are getting new text? or you toggling between "No.." and "Another text"? — Bhushan Kawadkar
– 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
– sha, Commented May 15, 2014 at 7:25
@BhushanKawadkar sorry im not really sure what you're asking :/ — sha
– sha, Commented May 15, 2014 at 7:26
@Yuki DEMO - this is my version. Something like that makes more sense to me. — Ruddy
– Ruddy, Commented May 15, 2014 at 7:29

Mark Rijsmus · Accepted Answer · 2014-05-15 07:24:52Z

4

Try something like this: http://jsfiddle.net/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]);
    });
});

answered May 15, 2014 at 7:24

Mark Rijsmus

6175 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

f1ames Over a year ago

I think this is the most flexible approach, so far

Mark Rijsmus Over a year ago

Nice! Well that is a matter of preference, i prefer readability :). But still nice edit.

sha Over a year ago

me too, and it looks great!! but then i tried it on here : /yosougay.tumblr.com and it doesn't seem to work though..

Mark Rijsmus Over a year ago

O well, keep in mind that you need the jquery library included for this solution.

sha Over a year ago

@MarkRijsmus oh do u mean that this has to be put before the javascript code in my theme? stackoverflow.com/questions/18576419/…

|

Hampus · Accepted Answer · 2014-05-15 07:38:59Z

1

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.com/4y6bzH9.png' 
       style="margin-left: 540px;
              margin-bottom: 20px;
              position: absolute; 
              outline:  none;"/>

edited May 15, 2014 at 7:38

answered May 15, 2014 at 7:28

Hampus

2,8391 gold badge27 silver badges40 bronze badges

Comments

Bhushan Kawadkar · Accepted Answer · 2014-05-15 07:25:53Z

0

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.com/4y6bzH9.png'
 style="margin-left:540px; margin-bottom:20px; position:absolute; outline:none;"/>
 <br /><br />

answered May 15, 2014 at 7:25

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

szxk · Accepted Answer · 2014-05-15 07:27:02Z

0

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.

answered May 15, 2014 at 7:27

szxk

1,84920 silver badges35 bronze badges

Comments

MrCode · Accepted Answer · 2014-05-15 07:30:05Z

0

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];
}

answered May 15, 2014 at 7:30

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Collectives™ on Stack Overflow

Button onclick more than once, different text in javascript

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related