Display Words At Random Position On Click

It's the first time I ever post something on a forum. I'm new with javascript. I found this : http://jsfiddle.net/6eTcD/2/ You type a word, and submit and then it appears randomly

Solution 1:

A solution to print the words one by one, not random.

var words = [
  'Hello',
  'No',
  'Hi',
  'Banana',
  'Apple'
];
var visible = 0;

document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault();

    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;

    var elem = document.createElement("div");
    elem.textContent = words[visible];
    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
    document.body.appendChild(elem);
    
    visible++;
});

<form><inputtype="submit"></form>

Solution 2:

You can use items[Math.floor(Math.random()*items.length)] to select a random element from the array items.

I've used the code you provided in the JSFiddle link:

document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault();
    
    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;
    
    var items = ['nothing', 'banana', 'apple', 'rasberry']
    var item = items[Math.floor(Math.random()*items.length)];
    
    var elem = document.createElement("div");
    elem.textContent = item;
    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
    document.body.appendChild(elem);
});

<form><inputtype="submit"></form>

Instead of searching for the string that is in the input box, the string will be randomly taken from the array of predefined strings items.

Solution 3:

You just need to create a function which gives you a random value from the array.

functiongetRandomWord(){
  var words = [
    'Hello',
    'No',
    'Hi',
    'Banana',
    'Apple'
  ];

  return words[Math.floor(Math.random() * words.length)];
}

And how calling when your click handler will fire, just display the value returned by this method

Here is snippet

Solution 4:

Working example: JSFiddle

var allWords = [
  'Hello',
  'No',
  'Hi',
  'Banana',
  'Apple'
]; 

functiongetRandomWord(words) {
  var randomIndex = Math.floor(Math.random() * words.length);
  return words[randomIndex];
}

document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault();

    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;

    var elem = document.createElement("div");
    elem.textContent = getRandomWord(allWords);

    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
    document.body.appendChild(elem);
});

Solution 5:

You're on the right track here. The first part you should look deeper into is your function getRandomWord. In javascript, there is no such thing as implicit returns, which means you actually need to choose to return something. Meaning you need to actually type the word return

functiongetRandomWord() {
    var words = [
      'Hello',
      'No',
      'Hi',
      'Banana',
      'Apple'
    ];
    return words[Math.floor(Math.random() * words.length)]
 }


var text = getRandomWord();

Further down in your solution, you've added that elem.textContent = words; This will not work because the way you have it defined, words is actually an array. There is more than one way to do this, but one way is to assign elem.textContent = getRandomWord().

Now, when you you assign the text content to your function getRandomWord(), getRandomWord will run (or execute), and will assign whatever word comes out of getRandomWord to your text.

I hope this helps!