Struggling to make a random option selector (HTML, Javascript)

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>
optionsArray.push = document.getElementById("option1").value;

The line above reassigns what the push method is for the optionsArray. You have replaced the built-in method with the value of the input with id=“option1”.

You should review the FCC curriculum challenges related to the push method, to see the proper syntax you should use in order to add elements to an array.

Once I replaced those 6 lines with the proper way to add those values into the optionsArray, your code works as intended.

1 Like

A better way to do all of this would be to create the array of options with a single querySelectorAll. Also, the selection of a random option can also be simplfied.

  <button onclick='picker()'>Choose</button>
  <script>
    function picker() {
      //declare empty array to put the options in
      var optionsArray = [...document.querySelectorAll('input[name*="picker"]')];

      //function for checking for empty user input boxes
      function checkBoxLength(option) {
        return option.value.length;
      }
      
      var filteredOptions = optionsArray.filter(checkBoxLength);
       
      //alert the user to the option that the function has selected		
      if (filteredOptions.length) {
        //randomise number to be used to select array index position
        var optionsRan = Math.floor(Math.random() * filteredOptions.length);
        alert(filteredOptions[optionsRan].value)
      } else {
        alert("D'oh!");
      }
    }
  </script>
1 Like

Thanks so much (sorry for my tardy response, went away). Can definitely see where I went wrong re the push method, and that 2nd option is nicely concise and makes sense to me.

Really appreciate your help!