Question

简而言之：作为一个独立的功能，我的随机数发生器工作。当与HTML和jQuery放在一起时，它不起作用。

详细说明：我正在构建一个“随机数发生器” - 一个HTML input会从用户那里获得由space分隔的多个单词。比方说，它会得到5,7,10,30个单词。然后，它会向用户随机返回这三个单词。

这个想法是用户输入是一个包含许多单词的单个字符串。然后，代码（应该）将字符串分解为字符串数组（使用.split）并将此新数组分配给另一个变量。然后，这个新创建的数组创建另一个新数组，该数组只有三个随机选择的单词。最后，最后一个数组是用户在单击按钮后应该看到的内容。

我在Atom编写代码，将HTML / CSS / JS保存在笔记本电脑（Mac）上的本地文件中，然后在Chrome上运行。

我正在使用jQuery 3.3.1。来自CDN。

问题的性质：当HTML和JS一起运行时，随机发生器不起作用 - 在几次按钮点击之后，碰巧我得到两个相同的单词应该是这种情况。不应该是这种情况，因为当我只使用一个变量测试JS代码时，我没有遇到同样的问题，我在一个字符串中指定了几个不同的单词。我的猜测是，当jQuery获取用户输入时会发生一些事情。但是，我完全不确定。

我现在打了两天这个。我尝试过任何我能想到的东西。

问题是我通过jQuery事件监听器链接JS函数和HTML代码的方式吗？

或许我的功能本身写得不好？

HTML / JS / jQuery代码如下：

// Here begins the jQuery code
$(document).ready( () => {

    let $button = $('.button');
    let $userInput = $('#userInputField');
    let $userOutput = $('.userOutput');

    $button.on('click', () => {
      var b = document.getElementById('userInputField').value;
      var a = doEverything(b);
      $userOutput.text(a);
    });

}); // Here ends the jQuery code.

//------------------------------------------------------------------------------------------------------------------------

// Here begins the JavaScript code
var coolWords = []; 

function doEverything(aString) {
  var bString = aString.split(" ");
  var finalResult = [];

  for (let i = 0; i < bString.length; i++) {
    coolWords.push(bString[i]);
  };

  newList = coolWords.slice();

  for (let i = 0; i < 3; i++) {
    var hey = newList.splice( Math.floor( Math.random() * newList.length ), 1) [0];
    finalResult.push(" " + hey);
  }; // [0] is used so finalResult receives only strings and not whole arrays with only one string in each array.

  return ("Hey, the words are " + finalResult[0] + ", " + finalResult[1] + " and " + finalResult[2] + ".");
};

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div id="button">
    <input type="text" id="userInputField" value="">
    <button class="button">Magic</button>
  </div>

  <div id="userOutput">
    <p class="userOutput">test</p>
  </div>

Answer 1

以下是您的代码已更新，可用作代码段，..

不幸的是，在Snippets中阻止了localStorage，但是将其存储在localStorage中的更改不应该太难。

更新：此外，如果您查看我已经使用localStorage注释掉的行，那么如果他们回来，那么他们应该为您的用户提供持续的话语。

// Here begins the jQuery code
$(document).ready( () => {

    let $button = $('.button');
    let $userInput = $('#userInputField');
    let $userOutput = $('.userOutput');

    $button.on('click', () => {
      var b = document.getElementById('userInputField').value;
      var a = doEverything(b);
      $userOutput.text(a);
    });

}); // Here ends the jQuery code.

//------------------------------------------------------------------------------------------------------------------------

// Here begins the JavaScript code
//var saved = localStorage.getItem("saved") || "[]";
var saved = "[]";
var coolWords = JSON.parse(saved); 


function doEverything(aString) {
  var bString = aString.split(" ");
  var finalResult = [];

  for (let i = 0; i < bString.length; i++) {
    if (coolWords.indexOf(bString[i]) < 0) // added this bit..
      coolWords.push(bString[i]);
  };

  newList = coolWords.slice();

  for (let i = 0; i < 3; i++) {
    var hey = newList.splice( Math.floor( Math.random() * newList.length ), 1) [0];
    finalResult.push(" " + hey);
  }; // [0] is used so finalResult receives only strings and not whole arrays with only one string in each array.
  
  //localStorage.setItem("saved",JSON.stringify(coolWords));
  return ("Hey, the words are " + finalResult[0] + ", " + finalResult[1] + " and " + finalResult[2] + ".");
};

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div id="button">
    <input type="text" id="userInputField" value="">
    <button class="button">Magic</button>
  </div>

  <div id="userOutput">
    <p class="userOutput">test</p>
  </div>

JavaScript随机函数在HTML上下文中不起作用但在

1 个答案: