I found this code here on Stackoverflow which displays random words onpage load and shows a new one when one reloads page. Being new to Javascript, i do not know how to make it loop between the words once page loads. That is displaying a new word from the list after every one second.
The Code is
var things = ['Rock', 'Paper', 'Scissor'];
var thing = things[Math.floor(Math.random()*things.length)];
alert('The computer chose:' + thing);EDIT: I would like to be priting the result on the page and not using alert.
Because you only have a small set of items you want to loop over, and are trying to prevent the same "random" item from being written lots of times in a row, you'll have to implement some sort of "remembering" system. Here I make a copy of the array and splice words from it, and then reset it once it's empty.
I've also used setTimeout in this example. (Personal preference.) You'll still occasionally get the same word come up twice in a row as the array resets. If you wanted no repeated words you can build that check into the function, but I think that defeats the whole purpose of "rock, paper, scissors" - sometimes you want to play "paper" 20 times in a row :)
const arr = ['Rock', 'Paper', 'Scissor'];
const el = document.querySelector('#demo');
// `log` accepts and array of words, and an element
function log(arr, el) {
// Makes a copy of that array
let copy = [...arr];
// Main loop that `setTimeout` calls over and over...
function loop() {
// Get the random number
const rnd = Math.floor(Math.random() * copy.length);
// Get a word by `splicing` it out of the array copy
const word = copy.splice(rnd, 1);
// Updated the element text content
el.textContent = `The computer chose: ${word}`;
// If there are no words left in the copy, reset it
if (!copy.length) copy = [...arr];
// Call `loop` again
setTimeout(loop, 1000);
}
// Call `loop`
loop();
}
log(arr, el);<div id="demo"></div>Correct answer to your question requires knowledge of two things. setInterval and document query selectors. To answer you in the most simple way possible I have divided solution to HTML and JS codes. In the HTML section you can see the DOM Element "p". It has ID called "random-thing". In CSS We refer to it, as #random-thing.
JavaScript code selects this element (Warning, it can be null, that's why we want to check whether it exists.). Then we can change element's property called innerText. You could also change it using innerHTML, but because we only want to change the text content, let's use the innerText property.
const randomThingDomEl = document.getElementById("random-thing");
const things = ['Rock', 'Paper', 'Scissor'];
const getRandomThing = () => things[Math.floor(Math.random()*things.length)];
setInterval(() => {
if (randomThingDomEl) {
randomThingDomEl.innerText = getRandomThing();
}
}, 1000);<p id="random-thing" />What you are looking for is setInterval()
const things = ['Rock', 'Paper', 'Scissor'];
setInterval(function() {
const thing = things[Math.floor(Math.random()*things.length)];
console.log('The computer chose : ' + thing);
}, 1000)