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 on the page.

HTML :

<form>
    <input type="text">
    <input type="submit">
</form>

JAVASCRIPT

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

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

    var text = this.querySelector("input[type='text']").value;

    var elem = document.createElement("div");
    elem.textContent = text;
    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);
});

Though I would like to choose myself the words that are gonna be displayed, and I'd like them to appear when the button is clicked. And at random positions. but not randoms words.

I tried to replace "text" with "words" and added

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

MY MODIFICATIONS :

// A $( document ).ready() block.
$( document ).ready(function() {


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

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

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

    var elem = document.createElement("div");
    elem.textContent = words;
    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);
});

    });

Anyway I don't think any of what I did could work. I'm new to this. Would any of you now?
Thank you in advance

回答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>
    <input type="submit">
</form>

回答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>
    <input type="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.

回答3:

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

function getRandomWord(){
  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

回答4:

Working example: JSFiddle

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

function getRandomWord(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);
});

回答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

    function getRandomWord() {
    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!

回答6:

Try this function, the function you wrote had some major syntax and logical issues. Also as of now its printing all the elements of the words array. You can take out a random index and print that indexed word too if you want.

Working fiddle

var fullWidth ;
var fullHeight;
var words = [
    'Hello',
    'No',
    'Hi',
    'Banana',
    'Apple'
  ];
function getRandomWord() {
    var random = Math.floor( words.length * Math.random());
    var randomWord = words[random];  

    var elem = document.createElement("div");
    elem.classList = "abc";
    elem.textContent = randomWord;
    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
            $(".abc").remove();
    document.body.appendChild(elem);
};
// A $( document ).ready() block.
$( document ).ready(function() {


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

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

    getRandomWord();

    });
});

来源：https://stackoverflow.com/questions/50493513/display-words-at-random-position-on-click