Hi all, I’m trying to make a randomised selector for user inputted options in an html form (e.g. user cn put in “go to the cinema”, “go bowling”, “go to the beach” as options and javascript would choose one at random and then alert)
But after days of trying to work out what I’m doing wrong, and trying various options, I’m struggling. My latest attempt is below, and involves using getElementById.value, pushing those to an array, using filter to remove those with a value of “”, then using Math.random to choose an array position to return, then alerting based on array position.
The problem is that all I get back is an alert with “undefined”. So I’m obviously doing something very wrong.
Anyone know what I’m missing? I’m still very new to all this, and have spent hours searching with no joy.
<Doctype HTML>
<html>
<head>
<title>Random Choice Picker</title>
</head>
<body>
<form name="choices">
<h1>Random Picker for Multiple Choices</h1>
<form id=picker>
<p>Option 1</p>
<input type=text id=option1 name=picker1></input><br>
<p>Option 2</p>
<input type=text id=option2 name=picker2></input><br>
<p>Option 3</p>
<input type=text id=option3 name=picker3></input><br>
<p>Option 4</p>
<input type=text id=option4 name=picker4></input><br>
<p>Option 5</p>
<input type=text id=option5 name=picker5></input><br>
<p>Option 6</p>
<input type=text id=option6 name=picker6></input><br>
<br>
</form>
<button onclick='picker(document.getElementById("option1").value, document.getElementById("option2").value, document.getElementById("option3").value, document.getElementById("option4").value, document.getElementById("option5").value, document.getElementById("option6").value);'>Choose</button>
<script>
function picker() {
//declare empty array to put the options in
var optionsArray = [];
//get options from user input and push to array
optionsArray.push = document.getElementById("option1").value;
optionsArray.push = document.getElementById("option2").value;
optionsArray.push = document.getElementById("option3").value;
optionsArray.push = document.getElementById("option4").value;
optionsArray.push = document.getElementById("option5").value;
optionsArray.push = document.getElementById("option6").value;
//function for checking for empty user input boxes
function checkBoxLength (stringLength) {
return stringLength.length != "";
}
//function to remove empty user input boxes
var filteredOptions = optionsArray.filter(checkBoxLength);
//randomise number to be used to select array index position
var optionsRan = Math.floor(Math.random() * filteredOptions.length);
//alert the user to the option that the function has selected
if (optionsRan === 0) {
alert(filteredOptions[0]);
} else if (optionsRan === 1) {
alert(filteredOptions[1]);
} else if (optionsRan === 2) {
alert(filteredOptions[2]);
} else if (optionsRan === 3) {
alert(filteredOptions[3]);
} else if (optionsRan === 4) {
alert(filteredOptions[4]);
} else if (optionsRan === 5) {
alert(filteredOptions[5]);
} else {
alert("D'oh!");
}
}
</script>
</body>
</html>