Changing button text from an array

Question

I'm trying to change the face value of buttons using an array but what I've got doesn't seem to be working.

$(document).ready(function(){
  var buttonValues = ["The letter 1", "The letter 2", "The letter 3", "The letter 4", "The letter 5"];
  var randomNumber = Math.floor((randomImages.length)*Math.random());
  $(".answer").text(buttonValues[randomNumber]);
});

JQuery above and the HTML below.

<button class="answer" id="1">a</button><br>
<button class="answer" id="2">b</button><br>
<button class="answer" id="3">c</button><br>

Any help would be appreciated, very new to jQuery. I have a couple of other functions going on in the JS file so will post a fiddle of the full code. I may have wrapped something wrong for all I now. Again very new to this. fiddle of current progress

Thanks for the help everyone, realised the silly mistake I made with the code but got some extra advice as well.

what is `randomImages' ?

Amit Kumar
– Amit Kumar

2017-04-25 10:32:22 +00:00
Commented Apr 25, 2017 at 10:32 — Amit Kumar
– Amit Kumar, Commented Apr 25, 2017 at 10:32
What is the final output you want?

Nitesh
– Nitesh

2017-04-25 10:32:30 +00:00
Commented Apr 25, 2017 at 10:32 — Nitesh
– Nitesh, Commented Apr 25, 2017 at 10:32

billyonecan · Accepted Answer · 2017-04-25 10:34:22Z

2

You're using a variable which isn't defined:

var randomNumber = Math.floor((randomImages.length)*Math.random());

Should be:

var randomNumber = Math.floor((buttonValues.length)*Math.random());

I'm guessing you'll also want to set different text for each button. Your current approach will set the same text for every button in the collection. Something like this should work:

$('.answer').text(function() {
  var randomNumber = Math.floor((buttonValues.length)*Math.random());
  return buttonValues[randomNumber];
});

Here's an updated fiddle

answered Apr 25, 2017 at 10:34

billyonecan

20.3k9 gold badges44 silver badges66 bronze badges

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

1 Comment

Yosvel Quintero Over a year ago

That way you get different button elements with the same text.. Check my answer

Yosvel Quintero · Accepted Answer · 2017-04-25 13:03:53Z

1

You are getting error: Uncaught ReferenceError: randomImages is not defined.

I think the variable randomNumber should be the length of the array buttonValues.

Than you should iterate over the buttons with class .abswer and set for jQuery.each() of them the jQuery.text().

Note that inside of the .each() loop you should create the randomNumber in order to get different text for the buttons elements.

And finally, to get all buttons with a different text just remove from the array the element with the randomNumber created index.

Code:

var buttonValues = ['The letter 1', 'The letter 2', 'The letter 3', 'The letter 4', 'The letter 5'];

$('.answer').each(function() {
  var $button = $(this),
      randomNumber = Math.floor(buttonValues.length * Math.random());
  
  $button.text(buttonValues[randomNumber]);
  $button.attr('id', randomNumber);
  
  // Remove element with index randomNumber
  buttonValues.splice(randomNumber, 1);
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<div class="answers">
  <button class="answer" id="1">a</button><br>
  <button class="answer" id="2">b</button><br>
  <button class="answer" id="3">c</button><br>
  <div class="clr"></div>
</div>

edited Apr 25, 2017 at 13:03

answered Apr 25, 2017 at 10:37

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

4 Comments

JimmyPop13 Over a year ago

Thank you for a very helpful response. Is there any chance you could point me in the right direction for applying the random number so it edits the id tag too? It's fine if you don't want to, you have already helped me immensely.

Yosvel Quintero Over a year ago

You mean to set id attribute to randomNumber + 1

JimmyPop13 Over a year ago

Yes this is what I'am after.

Yosvel Quintero Over a year ago

Updated the answer: $button.attr('id', randomNumber);

Alice · Accepted Answer · 2017-04-25 10:44:01Z

0

I too missed the variable name. Here is modified ans -

var buttonValues = ["The letter 1", "The letter 2", "The letter 3", "The letter 4", "The letter 5"]; var randomNumber = Math.floor((buttonValues.length)*Math.random());

$(".answer").html(buttonValues[randomNumber]);

edited Apr 25, 2017 at 10:44

answered Apr 25, 2017 at 10:28

Alice

1,4331 gold badge19 silver badges30 bronze badges

Comments

Eugen Tatuev · Accepted Answer · 2017-04-25 10:34:48Z

-2

Your randomImages array is not defined, code to change button text itself ($(".answer").text(...)) is correct :)

answered Apr 25, 2017 at 10:34

Eugen Tatuev

757 bronze badges

Collectives™ on Stack Overflow

Changing button text from an array

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related