Question

这是我第一次在论坛上发帖。我是javascript的新手。

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

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);
});

虽然我想选择自己会有的话显示，并且我希望它们在单击按钮时显示。在随机的位置。但不是randoms的话。

我试图替换＆＃34; text＆＃34;用＆＃34;单词＆＃34;并添加了

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

我的修改：

// 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);
});

    });

无论如何，我不认为我所做的任何事情都可行。我是新手。你们当中有人吗？提前谢谢

Answer 1

您可以使用items[Math.floor(Math.random()*items.length)]从数组items中选择一个随机元素。

我已经使用了您在JSFiddle链接中提供的代码：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

不是搜索输入框中的字符串，而是从预定义字符串items数组中随机取出字符串。

Answer 2

你只需要创建一个函数，从数组中为你提供一个随机值。

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

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

当点击处理程序触发时如何调用，只显示此方法返回的值

这是snippet

Answer 3

工作示例：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);
});

Answer 4

逐个打印单词的解决方案，而不是随机的。

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>

Answer 5

你在这里走在正确的轨道上。您应该深入研究的第一部分是您的函数getRandomWord。在javascript中，没有隐式返回这样的东西，这意味着你实际上需要选择返回一些东西。这意味着您需要实际输入单词return

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


var text = getRandomWord();

在您的解决方案中，您已经添加了elem.textContent = words;这不会起作用，因为您定义它的方式，words实际上是一个数组。有多种方法可以做到这一点，但一种方法是分配elem.textContent = getRandomWord()。

现在，当您将文本内容分配给函数getRandomWord（）时，getRandomWord将运行（或执行），并将getRandomWord中出现的任何单词分配给您的文本。

我希望这有帮助！

Answer 6

尝试此功能，您编写的功能有一些主要的语法和逻辑问题。另外截至目前它还打印了单词数组的所有元素。如果需要，您可以取出一个随机索引并打印该索引字。

工作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();

    });
});

单击时随机位置显示单词

6 个答案: