JS script stops working after more than one id-CodePudding

I created this javascript function to detect witch option is selected and depending on the selected text it should run an another function. the problem is that it only works with the first "select" id. I have been playing with it for a great amount of time and still I can't figure it out why this happens.

HTML:

<div id="amcdiv" >
    <label>
        <select id="select" onchange="selection();">
            <option selected>Típus</option>
            <option value="gremlin">Gremlin</option>
        </select>
    </label>
  </div>


<div id="audidiv" >
    <label>
        <select id="select" onchange="selection();">
            <option selected>Típus</option>
            <option value="s8">S8</option>
            <option>RS4</option>
            <option>RS7</option>
            <option>R8</option>
        </select>
    </label>
  </div>


<div id="bmwdiv" >
    <label>
        <select id="select" onchange="selection();">
            <option selected>Típus</option>
            <option value="e38">750 e38</option>
            <option value="e65">760 e65</option>
            <option value="e46">M3 e46</option>
            <option value="e92">M3 e92</option>
            <option value="m4">M4 2021</option>
            <option value="e34">M5 e34</option>
            <option value="e39">M5 e39</option>
            <option value="e60">M5 e60</option>
            <option value="e24">M635 CSi e24</option>
            <option value="m8">M8 Competition</option>
        </select>
    </label>
  </div>

JS:

function selection() {
    var select = document.getElementById("select").value;
    if (select == "e38") {
      oktext();
    }
    if (select == "e65") {
        oktext();
      }
    if (select == "e46") {
      goodtext();
    }
    if (select == "e92") {
      oktext();
    }
    if (select == "e34") {
      goodtext();
    }
    if (select == "e39") {
      goodtext();
    }
    if (select == "e60") {
      goodtext();
    }
    if (select == "m4") {
      goodtext();
    }
    if (select == "m4") {
      goodtext();
    }
    if (select == "gremlin") {
      goodtext();
    }
    if (select == "s8") {
      goodtext();
    }
    }

CodePudding user response：

Javascript ids must be unique and different. If you want one single id, use class instead.

Reference: https://www.w3schools.com/html/html_id.asp <= html id https://www.w3schools.com/html/html_classes.asp <= html classes

CodePudding user response：

I believe that this is what you're looking to achieve:

HTML:

<div id="amcdiv" >
  <label>
    <select onchange="selection(this.value);">
      <option value="Tipus" selected>Típus</option>
      <option value="gremlin">Gremlin</option>
    </select>
  </label>
</div>
<div id="audidiv" >
  <label>
    <select onchange="selection(this.value);">
      <option value="Tipus" selected>Típus</option>
      <option value="s8">S8</option>
      <option value="RS4">RS4</option>
      <option value="RS7">RS7</option>
      <option value="R8">R8</option>
    </select>
  </label>
</div>
<div id="bmwdiv" >
  <label>
    <select onchange="selection(this.value);">
      <option value="Tipus" selected>Típus</option>
      <option value="e38">750 e38</option>
      <option value="e65">760 e65</option>
      <option value="e46">M3 e46</option>
      <option value="e92">M3 e92</option>
      <option value="m4">M4 2021</option>
      <option value="e34">M5 e34</option>
      <option value="e39">M5 e39</option>
      <option value="e60">M5 e60</option>
      <option value="e24">M635 CSi e24</option>
      <option value="m8">M8 Competition</option>
    </select>
  </label>
</div>

function selection(value) {
  console.log(value);
}

You can now react to any string generated by any selection input. Remember to always have value field in each option node.

When it comes to why your code was not working, it was getting lost on id=select that was not unique and would always return the currently selected value of the first (found in the DOM) node with id=select. Another thing was that it also could not understand option nodes that did not have value attribute set.