在点击时随机显示单词 [英] display words at random position on click

问题描述

这是我第一次在论坛发帖。我是新的JavaScript。

我发现这个： http://jsfiddle.net/6eTcD/2/
您输入一个单词，然后提交，然后随机出现在页面上。

HTML：

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

JAVASCRIPT

 <$ （）; 
 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）; 
}）; 
  

虽然我想选择自己的单词是$显示b $ b，我希望它们在点击按钮时出现。
和随机头寸。但不是随机词。

我尝试用words替换text并添加了

  function getRandomWord（）{
 var words = [
'Hello'，
'No'，
'Hi '，
'香蕉'，
'苹果'
]; 
  

我的修改：

  // A $（document）.ready（）块。 
 $（document）.ready（function（）{
 
 
 document.querySelector（form）。addEventListener（submit，function（e）{
 e.preventDefault（）; 
 
 var fullWidth = window.innerWidth; 
 var fullHeight = window.innerHeight; 
 
函数getRandomWord（）{
 var words = [
'Hello'，
'No'，
'Hi'，
'Banana'，
'Apple'
]; 
 
 elem.style.txt =绝对; 
 elem.style .left = Math.round（Math.random（）* fullWidth）+px; 
 elem.style.top = Math.round（Math.random（）* fullHeight）+px; 
 document.body.appendChild（elem）; 
}）; 
 
}）; 
  

无论如何，我不认为我所做的任何工作都可行。我对此很陌生。
现在你们中的任何一个？

预先感谢您

解决方案

打印解决方案

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 ++;}）;

 <形式> < input type =submit>< / form>  

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

解决方案

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>

这篇关于在点击时随机显示单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！