JavaScript random word (from a list) generator

Question

I am new in JavaScript and I am very confused with the random command in JavaScript because in Python it's so different. I need help, because I want to made a Website on which you have 3 Buttons, when you press the first, only one random word from the first list is getting written in the text class above the Buttons and when you press the 2 Button only one Word from the 2. Array appears. But my JavaScript code doesn't work like it should. Here is the Code.

var Orte=('a','b','c')
var zufall=random(Orte) 
button1.onclick= document.getElementByclass('text')[0].innerHTML = 'zufall'

The first two lines of your snippet are not valid Javascript. You might want to look into Javascript arrays and the `Math.random()` function. — Aioros, Jun 09 '20 at 21:39
[Java !== JavaScript](https://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java) — user120242, Jun 09 '20 at 22:13

user120242 · Answer 1 · 2020-06-09T22:43:56.940

The DOM API you are looking for is: getElementsByClassName

onclick needs to be a function that will be called on click event. What you are doing is calling innerHTML='zufall' immediately, returning the string 'zufall', and assigning onclick='zufall', which is not what you want.

JavaScript array literals are denoted with [] not ().

I'm assuming the string 'zufall' is not what you want, but the variable zufall, which I've adjusted by removing the single quotes.

Math.random() (not random()) returns a random number from 0 to 1. Multiply that by the length and then floor to integer (You could use Math.trunc() also). And then in brackets to access that index in Orte.

Again, variables are set when they are assigned. Which is probably not what you want here. The same thing happens in Python. zufall would be assigned a value that doesn't change unless something is called to update it. This is a common mistake, although as an experienced Python programmer you should not be making this mistake anymore.
I've adjusted it so it updates zufall on every click. As you should be able to see, a global variable is unnecessary. You can just generate the zufall only in the onclick handler.

var Orte = ['a', 'b', 'c']
var zufall = Orte[Math.random()*Orte.length | 0]
button1.onclick = function(){
  zufall = Orte[Math.random()*Orte.length | 0]
  document.getElementsByClassName('text')[0].innerHTML = zufall
}

<div class="text"></div>
<button id="button1">click</button>

score 1 · Answer 2 · answered Jun 09 '20 at 22:41

The best thing to do is to study a little but more about variables, arrays, Math.random() function. My contribution:

Variables: Best practice is to name them using camelCase format (More on best practices here: https://www.robinwieruch.de/javascript-naming-conventions)
Arrays: You define arrays using "[]". In your example, it should be:

var orte = ['a','b','c'];

Also, it will be good to read about how you can access this values because you will be using this knowledge in your Math.random function.
Random function: To understand correctly how to use the Math.random() function, please check this link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random.
When you use '' or "", anything in between is treated as a string. So, in your code: "...innerHTML = 'zufall'", you are hardcoding the string "zuffal", not the variable.

I tried to create a working example so you can compare:

https://codesandbox.io/s/naughty-cache-v7hxt

score 1 · Accepted Answer · answered Jun 10 '20 at 01:19

You can do it with plain JavaScript like this:

var arr1 = ["a", "b", "c"], arr2 = ["d", "e", "f"], arr3 = ["g", "h", "i"];

function showRandomFrom(chosenArray){
  document.getElementsByClassName("text")[0].innerHTML = chosenArray[Math.floor(Math.random() * chosenArray.length)];
}

<div class="text"></div>
<button onclick="showRandomFrom(arr1);">From arr1</button>
<button onclick="showRandomFrom(arr2);">From arr2</button>
<button onclick="showRandomFrom(arr3);">From arr3</button>

Or like this with rando.js if you don't like randomness math:

var arr1 = ["a", "b", "c"], arr2 = ["d", "e", "f"], arr3 = ["g", "h", "i"];
var showRandomFrom = (chosenArray) => document.getElementsByClassName("text")[0].innerHTML = rando(chosenArray).value;

<script src="https://randojs.com/1.0.0.js"></script>
<div class="text"></div>
<button onclick="showRandomFrom(arr1);">From arr1</button>
<button onclick="showRandomFrom(arr2);">From arr2</button>
<button onclick="showRandomFrom(arr3);">From arr3</button>

Also, JavaScript is a different language than Java. The code I've given you is JavaScript.

JavaScript random word (from a list) generator

3 Answers3