0

Select inside tag click function is not working

function TestsFunction() {

  var T = document.getElementById("TestsDiv"),
    displayValue = "";
  if (T.style.display == "")
    displayValue = "none";

  T.style.display = displayValue;
}

function TestsFunction1() {

  var T = document.getElementById("TestsDiv1"),
    displayValue = "";
  if (T.style.display == "")
    displayValue = "none";

  T.style.display = displayValue;
}
<!DOCTYPE html>
<html>

  <body>
    <form>
      <div id="TestsDiv" style="display:none">
        <button id="btnclick">Copy</button>
      </div>
      <div id="TestsDiv1" style="display:none">
        <button id="btnclick1">dg</button>
      </div>

      <select>
        <option onclick="TestsFunction()" value="Please">Please select one</option>
        <option onclick="TestsFunction1()" value="Fruts">Fruts</option>

      </select>
    </form>
  </body>
</html>

in this case of sin Orio click function is working correctly

<option  onclick="TestsFunction()" value="Please">Please select one</option>
<option  onclick="TestsFunction1()" value="Fruts" >Fruts</option>

when I change it to this, its not working

<select>
   <option  onclick="TestsFunction()" value="Please">Vegitable</option>
   <option  onclick="TestsFunction1()" value="Fruits" >Fruits</option>  
</select>

Can any one give a solution for this problem please?

Chris G
  • 1,598
  • 1
  • 6
  • 18
SPM
  • 5
  • 2
  • 1
    Use the `change` event of the `select` tag. – Lain Jan 23 '23 at 11:22
  • See the documentation: [`change` event](//developer.mozilla.org/en/docs/Web/API/HTMLElement/change_event). Inline event handlers like `onclick` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Jan 23 '23 at 11:24
  • 1
    `option` https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option does NOT support `onclick` attribute. Use `onchange` handler on `select` element. – Jan Pfeifer Jan 23 '23 at 11:37

1 Answers1

0

I deleted the function TestsFunction1, it was giving an unexpected end of input. In order for this to work, you need to assign the onchange event listener to the select tag.

Here is a working snippet for you to try this out.

function TestsFunction() {
         var T = document.getElementById("TestsDiv"),
         displayValue = "";
         
         if (T.style.display == "") {
            displayValue = "none";
            T.style.display = displayValue;
         }
 }
<form>
      <div id="TestsDiv">
         <button id="btnclick" >Copy</button>
      </div>
      <div id="TestsDiv1">
         <button id="btnclick1">dg</button>
      </div>
      <select onchange="TestsFunction()" >
          <option value="F" >Fruts</option>                 
                            <option value="V" >Vegetable</option>   
           </select>     
    </form>
SPM
  • 5
  • 2
Oris Sin
  • 1,023
  • 1
  • 13
  • 33