Using Javascript with HTML drop-down select

Question

I am having problems using data from a drop down list with my javascript. I want it to print out on the page based off what is selected, but so far when they select a value, nothing happens. I am new to javasript, please help:

<form>
    <select name="abc" id="abc" onChange="check(this.form)">
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </select>
</form>
<script>
    function check (form){
        var letter = document.getElementsById("abc");
        var userLtr = letter.options[letter.selectedIndex].value;
        if (userLtr == "a"){
            document.write ("You selected A");
        }
        else if(userLtr == "b"){
            document.write ("You selected B");
        }
        else{
            document.write ("You selected C");
        }
    }
</script>

edit: Thank you all for the help. I have figured it out!!

getElementById not getElementId. You also need some sort of event handler like onchange — j08691
– j08691, Commented Aug 4, 2020 at 22:23

j08691 · Accepted Answer · 2020-08-04 22:32:27Z

2

Your code in the <script> section is only execute when the page is ready. You'd need to use something like onchange on the select tag and a function to handle it. onchange event. And the getDocumentId should be getDocumentById, you can check out the docs on that here.

<select name="abc" id="abc" onchange="handleChange()">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>
<script>
    function handleChange() {
      var letter = document.getElementById("abc");
      var userLtr = letter.options[letter.selectedIndex].value;
      if(userLtr == "a"){
         document.write("You selected A");
      }
    }
</script>

edited Aug 4, 2020 at 22:32

j08691

208k33 gold badges269 silver badges281 bronze badges

answered Aug 4, 2020 at 22:28

th1nkful

1181 silver badge7 bronze badges

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

1 Comment

th1nkful Over a year ago

Keep in mind though, that using document.write() will remove all of your existing HTML (the select and options) and replace it with what you have provided, 'You selected A'. You can read more about the write function here.

M-Chen-3 · Accepted Answer · 2020-08-04 22:32:23Z

1

Here is how you would do that:

        <select name="abc" id="abc">
            <option value="a">A</option>
            <option value="b">B</option>
            <option value="c">C</option>
        </select>

        <div id="text"></div>
        <script>
            document.getElementById("abc").onchange = function () {
                if (this.value === "a")
                {
                    document.querySelector("#text").innerHTML = "You selected A!";
                }
            };
        </script>

answered Aug 4, 2020 at 22:32

M-Chen-3

2,0535 gold badges16 silver badges39 bronze badges

5 Comments

th1nkful Over a year ago

Nice touch changing the destructive document.write to use innerHTML instead

M-Chen-3 Over a year ago

@th1nkful Thanks!

Daniel Over a year ago

I would recommend using innerText instead of innerHTML as this is a safer alternative. You can see my question where I did something similar to this.

M-Chen-3 Over a year ago

@Daniel True, but in this case I don't think it makes a huge difference.

Daniel Over a year ago

I just wanted to point it out because the OP is "new to javascript" and probably hasn't thought of XSS attacks at all yet.

jason_r · Accepted Answer · 2020-08-04 22:31:14Z

0

Aside from the typo on getElementById you should add an event listener to the select element:

<script>
    var letter = document.getElementById("abc");
    letter.addEventListener('change', handleSelect) 
    function handleSelect(e) {
        var userLtr = letter.options[letter.selectedIndex].value;
        if(userLtr == "a"){
            document.write("You selected A");
        }
    }   
</script>

answered Aug 4, 2020 at 22:31

jason_r

3451 silver badge11 bronze badges

Comments

Daniel · Accepted Answer · 2020-08-04 22:36:43Z

0

You forgot the "by" in "getElementById".

If you add an onchange event listener that is linked to the javascript function that will write into a div, you can then use a template string to show which option is selected as can be seen below.

function changedFunc() {
  var letter = document.getElementById("abc");
  var userLtr = letter.options[letter.selectedIndex].value;
  document.querySelector('#write-target').innerText =`You selected ${userLtr}`;
} 
changedFunc();

<select name="abc" id="abc" onchange="changedFunc()">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>
<div id="write-target"></div>

edited Aug 4, 2020 at 22:36

answered Aug 4, 2020 at 22:25

Daniel

1,4701 gold badge7 silver badges19 bronze badges

2 Comments

th1nkful Over a year ago

This still won't work as the code will only be executed when the page loads. He would need to an event handler too

th1nkful Over a year ago

Didn't spot that before I added my comment, whoops!

Collectives™ on Stack Overflow

Using Javascript with HTML drop-down select

4 Answers 4

1 Comment

5 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related