I have three random word generators on the same page. One prints an adjective, one a verb, and one a noun upon clicking their respective buttons. If two of the arrays have three words, and one array has four words, why wont the fourth word in the third array every print?
<form>
<div id="displayAdjective"></div>
<input type="button" value="display adjective" onclick="randomAdjective()" class="wordFormButton">
</form>
<form>
<div id="displayVerb"></div>
<input type="button" value="display verb" onclick="randomVerb()" class="wordFormButton">
</form>
<form>
<div id="displayNoun"></div>
<input type="button" value="display noun" onclick="randomNoun()" class="wordFormButton">
</form>
I’m unsure why the 4th word in the nouns array never prints.
adjectives = ["adjectiveOne", "adjectiveTwo", "adjectiveThree"];
verbs = ["verbOne", "verbTwo", "verbThree"];
nouns = ["nounOne", "nounTwo", "nounThree", "nounFour"];
function randomAdjectiveAlt() {
var randomAdjective = Math.floor(Math.random() * adjectives.length);
document.getElementById('displayAdjective').innerHTML = adjectives[randomAdjective];
}
function randomVerbAlt() {
var randomVerb = Math.floor(Math.random() * adjectives.length);
document.getElementById('displayVerb').innerHTML = verbs[randomVerb];
}
function randomNounAlt() {
var randomNoun = Math.floor(Math.random() * adjectives.length);
document.getElementById('displayNoun').innerHTML = nouns[randomNoun];
}
Here’s a link to the jsfiddle showing the full example.