来自数组的JavaScript随机选择器，具有“向数组添加名称”功能

Question

好的，我有这个JavaScript程式。 我正在尝试制作一个程序，该程序从“从前”中随机选择两个字符并将其匹配。 我的工作正常，但是“将名称添加到阵列”功能遇到了麻烦。 这是我的代码：

<center>
<b>
<input type="button" value="Randomize!" onclick="ouatRandomizer();">
<b>
<p id="text"></p>
<input id="name" type="text" placeholder="Add a Name" />
<input type="button" value="Add Array" onclick="addToArray();">
</center>

<script>

var nameInput   = document.getElementById("name");

var names = ["Hook", "Rumpelstiltskin", "Belle", "Emma", "Regina", "Aurora", "Elsa", "Anna", "Snow White", "Prince Charming", "Cora", "Zelena", "August", "Mulan", "Graham", "Discord", "Will", "Robin Hood", "Jiminy Cricket", "Henry", "Neal", "Red"];
var nameone = names[Math.floor(Math.random() * names.length)];
var nametwo = names[Math.floor(Math.random() * names.length)];
message = "Your characters are.. " + nameone + " and " + nametwo + ".";


function ouatRandomizer() {
    nameone = names[Math.floor(Math.random() * names.length)];
    nametwo = names[Math.floor(Math.random() * names.length)];
    message = "Your characters are.. " + nameone + " and " + nametwo + ".";
    document.getElementById("text").innerHTML = message;
}

function addToArray( name ) {
    names.push( name );
    console.log(names.join());
}



</script>

我希望它能够在输入框中添加任何名称，并自动使用该名称进行随机化。 它不必记住名称，因为名称很复杂，可能会使用单独的文本文件，但是如果可以的话，谢谢。

我再次感谢您抽出宝贵的时间阅读本文并帮助我解决了我的问题。 我现在想提两件事。 首先，我对这些论坛还比较陌生，所以我不太了解它们。 其次，请尝试以简短但描述性的方式解释代码。 我仍然是初学者，并且，正如我所说，是论坛的新手。

谢谢。

Answer 1

我首先要提到的是，除了Math.random()是伪随机数生成器之外，您的随机化算法还偏向数组的前端，并且永远不会选择“ Graham”之后的任何东西。

您可以改用以下随机化器解决此问题：

/*
 * 
 * @param upper_bound is the total number of elements in your array.
 * 
 */
function randomize (upper_bound) {
    return Math.floor(Math.random() * upper_bound);
}

要回答您的问题，您需要在调用addToArray()函数之前获取输入的值。

更换

<input type="button" value="Add Array" onclick="addToArray();">

与

<button onclick="addInput()"></button>

然后将此函数添加到您的代码中：

function addInput () {
    var name = document.getElementById("name").value;
    addToArray(name);
}

希望能有所帮助。