JavaScript Random Picker From Array with “Add Name to Array” Feature

Question

Okay, so I have this JavaScript program. I am trying to make a program that randomly picks two characters from Once Upon A Time and matches them. I got that working fine, but am having trouble with the "Add Name to Array" feature. Here is my code:

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

I would like it to be able to add any name in the input box and automatically randomize with that name. It does not have to remember the name, as that is complicated and would probably use a separate text file, but if you can do that, thank you.

I thank you, again, for taking the time to read this and helping me solve my problem. Two quick things I did want to mention now. First, I am relatively new to these forums, so I do not know them very well. Second, please try and explain the code if there is a lot in a brief, but descriptive way. I am still a beginner coder, and, as I said, new to the forums.

Thank you.

Answer 1

I'll start off by mentioning that aside from Math.random() being a pseudo-random number generator, your randomization algorithm is biased towards the front of the array and will never select anything past "Graham".

You can fix this by using this randomiser instead:

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

To answer your question, you have to need to grab the value of the input before you call the addToArray() function.

Replace

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

with

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

Then add this function to your code:

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

Hope that helps.