來自數組的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);
}

希望能有所幫助。