JavaScript 具有 "Add Name to Array" 特征的数组中的随机选择器

JavaScript Random Picker From Array with "Add Name to Array" Feature

好的,所以我有了这个 JavaScript 程序。我正在尝试制作一个程序,随机从黄飞鸿中挑选两个角色并匹配它们。我的工作正常,但在使用 "Add Name to Array" 功能时遇到了问题。这是我的代码:

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

我希望它能够在输入框中添加任何名称并自动随机选择该名称。它不必记住名称,因为这很复杂并且可能会使用单独的文本文件,但如果你能做到这一点,谢谢。

再次感谢您花时间阅读本文并帮助我解决问题。我现在确实想提两件事。首先,我对这些论坛比较陌生,所以不是很了解。其次,如果有很多,请尝试以简短但描述性的方式解释代码。我仍然是一名初学者编码员,而且正如我所说,我是论坛的新手。

谢谢。

我首先要提到的是,除了 Math.random() 作为伪随机数生成器之外,您的随机化算法偏向于数组的前面,并且永远不会 select 过去 "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);
}

希望对您有所帮助。