Displaying html dropdown list selection with javascript

Question

I'm trying to use js to display a users selection in an HTML dropdown list after their selection is submitted. I've searched for hours and tried several different methods and none of them have worked so far. This is my current code:

<script>
    var e = document.getElementById("user_engine");
    var strUser = e.options[e.selectedIndex].text;
    function showEngineChoice() {
        document.getElementById('engine').innerHTML = 
                    document.getElementById("strUser").value;
    }
</script>
<label><b>What type of engine would you like in your favorite car?</b></label>
<select name="engine_types" id="user_engine">
    <option value="1">In-Line V6</option>
    <option value="2">3.8L 4-cylinder</option>
    <option value="3">Twin Turbo V10</option>
    <option value="4">RS-68 Rocket Engine</option>
</select>
<input type="submit" onclick="showEngineChoice()"><br />
<label>You chose: </label><br />
<p><span id="engine"></span></p><br />
<label>Nice Choice!</label>

I've tried a few other methods, and each time I run the code, clicking the submit button after making a selection does nothing. What am I not doing right?

I can't see how var e = document.getElementById("user_engine"); can be defined , since your <script></script> is preceding the #user_engine element AND your code appears to be asynchronous. — user8701049
– user8701049, Commented Nov 12, 2017 at 5:23

user8701049 · Accepted Answer · 2017-11-12 05:33:35Z

1

Your script is preceding your document body. Which means the elements you are referencing using getElementById are not defined. Here is a working example: https://codepen.io/pablo-tavarez/pen/NwjrYm?editors=1010

   <script>
    // await a fully loaded DOM
    document.addEventListener('DOMContentLoaded', function () {

      // prefetch element references
      var ue = document.getElementById("user_engine");
      var e = document.getElementById('engine');


      // define (global) onsubmit function
      window.showEngineChoice = function showEngineChoice() {
         // update content with CURRENTLY selected option
          e.innerHTML = ue.options[ue.selectedIndex].value;
      }
    });
</script>
<label>
    <b>What type of engine would you like in your favorite car?</b>
</label>
<select name="engine_types" id="user_engine">
    <option value="1">In-Line V6</option>
    <option value="2">3.8L 4-cylinder</option>
    <option value="3">Twin Turbo V10</option>
    <option value="4">RS-68 Rocket Engine</option>
</select>
<input type="submit" onclick="showEngineChoice()"><br />
<label>You chose: </label><br />
<p>
    <span id="engine"></span>
</p><br />
<label>Nice Choice!</label>

answered Nov 12, 2017 at 5:33

user8701049

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

2 Comments

andrrrify Over a year ago

I see what you're saying. I'm still a newbie with JavaScript so I probably wouldn't have caught that but your code makes sense. I just replaced .value with .text to return the selected choice. Thanks for the help!

user8701049 Over a year ago

Awesome I'm glad you understand.

Alastair Cooper · Accepted Answer · 2017-11-12 05:27:07Z

1

     document.getElementById('engine').innerHTML = 
                document.getElementById("strUser").value;

change 'strUser' to 'user-engine'

answered Nov 12, 2017 at 5:27

Alastair Cooper

821 silver badge6 bronze badges

Comments

Nisarg Shah · Accepted Answer · 2017-11-12 05:33:59Z

In addition to the fact that you need to select the correct element using user_engine instead of strUser, you might also want to replace .value with .selectedOptions[0].text.

The value property returns the value of the option - i.e. 1,2,3 etc. Whereas when you access selectedOptions[0].text it gives you the text of the first selected option.

Also, you'd have to keep the script after the HTML content in order to ensure that the elements are loaded to DOM by the time script runs.

var e = document.getElementById("user_engine");
var strUser = e.options[e.selectedIndex].text;

function showEngineChoice() {
  document.getElementById('engine').innerHTML =
    document.getElementById("user_engine").selectedOptions[0].text;
}

<label><b>What type of engine would you like in your favorite car?</b></label>
<select name="engine_types" id="user_engine">
    <option value="1">In-Line V6</option>
    <option value="2">3.8L 4-cylinder</option>
    <option value="3">Twin Turbo V10</option>
    <option value="4">RS-68 Rocket Engine</option>
</select>
<input type="submit" onclick="showEngineChoice()"><br />
<label>You chose: </label><br />
<p><span id="engine"></span></p><br />
<label>Nice Choice!</label>

Collectives™ on Stack Overflow

Displaying html dropdown list selection with javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related