Clever Geek Handbook

Changing button text from an array

I'm trying to change the nominal value of buttons using an array, but what I have doesn't seem to work.

$(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 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 few other functions that happen in a JS file, so post the complete code script. Maybe I packed something wrong after all. Very new again. current progress scenario

Thanks for helping everyone, realized the stupid mistake I made with the code, but also got some additional advice.

+3


source to share


4 answers


You get an error: Uncaught ReferenceError: randomImages is not defined

.

I think the variable randomNumber

should be the length of the array buttonValues

.

Than you have .abswer

to iterate over buttons with a class and set for jQuery.each () of these to jQuery.text () .

Note that inside the loop .each()

you have to create randomNumber

to get the text for the elements buttons

.



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

.

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>
Run codeHide result


+1


source


You are using a variable that is not defined:

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

Should be:

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


I assume that you also want to set different texts 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 the updated fiddle

+2


source


I missed the variable name too. Here's the ans changed -

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

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

0


source


Your array randomImages

is undefined, the code for changing the text of the button ( $(".answer").text(...)

) itself is correct :)

-2


source






More articles:


All Articles