CODEWITHSUNDEEP
javascripthtml-select
andrrrify
andrrrify

Reputation: 33

Displaying html dropdown list selection with javascript

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?

Upvotes: 0

Views: 160

Answers (3)

Nisarg Shah
Nisarg Shah

Reputation: 14561

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>

Upvotes: 0

user8701049
user8701049

Reputation:

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>

Upvotes: 1

Alastair Cooper
Alastair Cooper

Reputation: 82

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

change 'strUser' to 'user-engine'

Upvotes: 1

Related Questions