CODEWITHSUNDEEP
javascripthtml
sam
sam

Reputation: 79

Javascript - getting the selected dropdown value return null

I am getting error TypeError: e is null when trying to retrieve the value of the selected item in a dropdown list through window.alert(idName);. Sorry if this is a obvious error as I am new to javascript.

<html>
  <head>
    <script language="javascript" type="text/javascript">
       function openContent(evt, displayInfo) {
        // Declare all variables
        var i, tabcontent, tablinks;
        var numusrs = ["-50","-100", "-150"];
        var permission = [" Admin-", " Editor-"];

        var e = document.getElementById("dropdown");
        var idName = displayInfo + numusrs[0] + permission[0] + e.options[e.selectedIndex].text;

        window.alert(idName);

     }
</script></head>
<body>
  <select class="dropdown">
     <option value="Mean"> Mean </option>
     <option value="Max"> Max </option>
     <option value="50thPct"> 50th Percentil </option>
     <option value="75thPct"> 75th Percentil </option>
     <option value="95thPct"> 95th Percentil </option>
     <option value="99thPct"> 99th Percentil </option>
  </select>

 <ul class="tab">
     <li style="font-size:large;" >Summary</li>
     <ul class="subtab">
        <li><a href="#" class="tablinks" onclick="openContent(event, 'APISummary')">API</a></li>
        <li><a href="#" class="tablinks" onclick="openContent(event, 'TestSummary')">TEST</a></li>
     </ul>
     <li style="font-size:large;">Detail</li>
     <ul class="subtab">
        <li><a href="#" class="tablinks" onclick="openContent(event, 'Detail-API-150 Admin-Mean')">API</a></li>
        <li><a href="#" class="tablinks" onclick="openContent(event, 'Detail-TEST-150 Admin-Mean')">TEST</a></li>
     </ul>
  </ul>

Upvotes: 0

Views: 2925

Answers (3)

M.Tanzil
M.Tanzil

Reputation: 1995

In javascript you are getting the dropdown selected value by its id but in HTML you have given the dropdown class. so

  1. Change class="dropdown" to id="dropdown"

  2. Get dropdown value using this code

     var e = document.getElementById("dropdown");
 e.options[e.selectedIndex].value;

Using .text will return the text inside options.

Upvotes: 1

mtage70
mtage70

Reputation: 21

Haven't done Javascript in a while so apologies if I'm wrong but you may mean to use getElementByClassName.

Upvotes: -1

James Thorpe
James Thorpe

Reputation: 32202

Your <select> has a class of dropdown:

<select class="dropdown">

But you're searching by id:

var e = document.getElementById("dropdown");

The quickest fix is to add the ID to your <select> too:

<select class="dropdown" id="dropdown">

I say "quickest", because if you change class="dropdown" to id="dropdown" it may have an affect on styling that potentially isn't included in your question.

Upvotes: 1

Related Questions