CODEWITHSUNDEEP
javascriptjqueryhtml
JimmyPop13
JimmyPop13

Reputation: 317

Changing button text from an array

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.

Upvotes: 3

Views: 1063

Answers (4)

Yosvel Quintero
Yosvel Quintero

Reputation: 19070

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>

Upvotes: 1

Alice
Alice

Reputation: 1433

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

Upvotes: 0

Eugen Tatuev
Eugen Tatuev

Reputation: 75

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

Upvotes: -2

billyonecan
billyonecan

Reputation: 20250

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

Upvotes: 2

Related Questions