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.

Answer 1

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

Answer 2

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>