HTML onclick only working once with JavaScript

Question

As said above. Here is an example of the kind of code I am trying to use:

<button id='myButt' onclick='randGen()'>New Target</button>
<button id="myOtherButt" onclick='clear()'>Clear</button>

<p id='test'>Click me to randomly choose from the array!</p>

And then JS;

var myArray = ["Empire", "Rebels", "Scum", "Clones", "Trade Federation", "Sith", "Jedi"];
var rand = myArray[Math.floor(Math.random() * myArray.length)];

function randGen() {
  document.getElementById('test').innerHTML = rand;
}; 

function clear() {
  document.getElementById('test').innerHTML = 'No';
};

It works well once, but 'clear' or trying to use the First button more than once is not responsive. Could someone help me understand what I'm not doing right?

you are setting the value for rand only once. So you get the same result every time. Move the line `var rand = (...) into the function. — Burki
– Burki, Commented Jan 12, 2016 at 13:17
You have two completely different problems here. The second one is a duplicate of Why can't I call a function named clear from an onclick attribute? — Quentin
– Quentin, Commented Jan 12, 2016 at 13:18
@Quentin , I wasn't aware that onClick was bad standard. Thanks! I look forward to reading up more on it. — Luke Sheldon
– Luke Sheldon, Commented Jan 12, 2016 at 13:30

Konstantin Dinev · Accepted Answer · 2016-01-12 13:16:47Z

4

You have generated your random once when the page is loading and it never changes. In order for it to change you need to generate it again on click:

var myArray = ["Empire", "Rebels", "Scum", "Clones", "Trade Federation", "Sith", "Jedi"];

function randGen() {
    var rand = myArray[Math.floor(Math.random() * myArray.length)];
    document.getElementById('test').innerHTML = rand;
};

answered Jan 12, 2016 at 13:16

Konstantin Dinev

35k14 gold badges79 silver badges102 bronze badges

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

1 Comment

Luke Sheldon Over a year ago

Aahhh that makes sense-it needs to operate within the function or else it just happens once when the page loads... Thank you so much! :)

Arnaud Gueras · Accepted Answer · 2016-01-12 13:17:44Z

2

You are calling rand that is only a variable that was generated one time.

If you want to get another random item, you should use a function that returns the result :

function rand() {
    var myArray = ["Empire", "Rebels", "Scum", "Clones", "Trade Federation", "Sith", "Jedi"];
    return myArray[Math.floor(Math.random() * myArray.length)];
}
function randGen() {
  document.getElementById('test').innerHTML = rand();
}; 

function clear() {
  document.getElementById('test').innerHTML = 'No';
};

answered Jan 12, 2016 at 13:17

Arnaud Gueras

2,06215 silver badges14 bronze badges

Comments

Daniel Bauer · Accepted Answer · 2016-01-12 13:23:52Z

0

The problem here is that you initialize the property "rand" only at the beginning. So everytime you call the function "randGen()" the "rand" property uses the same value.

To always get a new value you also have to set rand to a new value.

The solution is that simple:

function randGen() {
  // get a new value
  var rand = myArray[Math.floor(Math.random() * myArray.length)];

  // set the value
  document.getElementById('test').innerHTML = rand;
};

answered Jan 12, 2016 at 13:23

Daniel Bauer

1682 silver badges12 bronze badges

Collectives™ on Stack Overflow

HTML onclick only working once with JavaScript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related