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, Jan 12 '16 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?](http://stackoverflow.com/questions/31613748/why-is-the-2nd-function-inside-script-not-working/31613889#31613889) — Quentin, Jan 12 '16 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, Jan 12 '16 at 13:30

score 4 · Accepted Answer · answered Jan 12 '16 at 13:16

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 '16 at 13:16

Konstantin Dinev

34,219
14
75
100

1

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! :) – Luke Sheldon Jan 12 '16 at 13:28

score 2 · Answer 2 · answered Jan 12 '16 at 13:17

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';
};

score 0 · Answer 3 · answered Jan 12 '16 at 13:23

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;
};

HTML onclick only working once with JavaScript

3 Answers3