0

its working fine until i put the tag on select category can someone help me a bit , after i put the tag its just not working..

function category(s1, s2) {
  var s1 = document.getElementById(s1);
  var s2 = document.getElementById(s2);
  s2.innerHTML = "";
  if (s1.value == "letters") {
    var optionArray = ["a|a", "b|b"];
  } else if (s1.value == "numbers") {
    var optionArray = ["1|1", "2|2"];
  } else if (s1.value == "soon") {
    var optionArray = ["|", "|", "|"];
  }
  for (var option in optionArray) {
    var pair = optionArray[option].split("|");
    var newOption = document.createElement("option");
    newOption.value = pair[0];
    newOption.innerHTML = pair[1];
    s2.options.add(newOption);
  }
}
<form>
  <select id="category" onchange="category('category','subcategory')">
    <option value=""></option>
    <option value="letters">Letters</option>
    <option value="numbers">Numbers</option>
  </select>
  <br>
  <select id="subcategory"> </select>
  <br>
</form>
Barmar
  • 741,623
  • 53
  • 500
  • 612
Suciu
  • 1
  • 1
    **its just not working..** does not help anyone debug your code. Whats not working? What are you expecting to happen? and what is or is not happening? Can you do up a fiddle or something to highlight the issue that you are having? Have you checked the console for errors? – Craicerjack Oct 02 '20 at 16:29
  • Don't use the same name for the function and the ID of the `select`. IDs become global variables, so the name `category` refers to the `select`, not the function. – Barmar Oct 02 '20 at 16:31
  • You have a function and an id with the same name in your code. – Craicerjack Oct 02 '20 at 16:31

1 Answers1

0

To be compatible with older browsers, whenever you give an ID to some HTML element it's registered in a global scope under window so your category doesn't refer to the function but to the select element. Just name the function differently

Adassko
  • 5,201
  • 20
  • 37