Javascript - getting the selected dropdown value return null

Question

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>

typo with dropdown attr use id="dropdown", check answer

M.Tanzil
– M.Tanzil

2016-06-29 15:48:29 +00:00
Commented Jun 29, 2016 at 15:48 — M.Tanzil
– M.Tanzil, Commented Jun 29, 2016 at 15:48

James Thorpe · Accepted Answer · 2016-06-29 15:39:40Z

1

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.

answered Jun 29, 2016 at 15:39

James Thorpe

32.3k6 gold badges76 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sam Over a year ago

Thanks, it fixed it. Will select as answer after 7 minutes. Yeah, it's a very obvious mistake.

M.Tanzil · Accepted Answer · 2016-06-29 15:40:17Z

1

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

Change class="dropdown" to id="dropdown"

Get dropdown value using this code

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

Using .text will return the text inside options.

answered Jun 29, 2016 at 15:40

M.Tanzil

2,0031 gold badge15 silver badges28 bronze badges

Comments

mtage70 · Accepted Answer · 2016-06-29 15:39:40Z

-1

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

answered Jun 29, 2016 at 15:39

mtage70

211 silver badge3 bronze badges

Collectives™ on Stack Overflow

Javascript - getting the selected dropdown value return null

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related