this js code doesnt work and i need another pair of eyes here

Question

I am trying to add selected options to tag using js. I try adding embedded code on "Shopify" and it doesn't change the options in the other . When using w3school editor it works. Any idea why it doesn't work here?

<div style="text-align:center;">
  <table border="2">
    <tbody>
      <tr>
        <td>
          <select onchange="genderChoose()" id="userGender"> 
            <option value="null">Choose gender</option><option value="1">Women</option>
            <option value="Men">Men</option> 
          </select>
        </td>
        <td>
          <select id="category">
            <option value="Choose category">Choose category
            </option>
          </select>
        </td>
        <td>
          <input type="text"><input id="searchygolide" type="submit" 
          value="Ygolide it !">
        </td>

      </tr>
    </tbody>
  </table>
  <script>
    function genderChoose(){
      if (document.getElementById("userGender").value == 1) 
      {
        document.getElementById("category").innerHTML = '<option 
        value="shirts">shirts</option><option value ="tops">tops</option>'
      }
    }
  </script>
</div>

Answer 1

There appears to be a line break in the middle of the string you're trying to set to your #category element's innerHTML , right before value="shirts" . You should see an error in your console because of it. Remove the line break to fix the string.

 <script> function genderChoose(){ if (document.getElementById("userGender").value == 1) { document.getElementById("category").innerHTML = '<option value="shirts">shirts</option><option value ="tops">tops</option>' } } </script>