CODEWITHSUNDEEP
javascripthtmlhtml-select
Alexander LeRoy
Alexander LeRoy

Reputation: 1

Using Javascript with HTML drop-down select

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!!

Upvotes: 0

Views: 259

Answers (4)

Daniel
Daniel

Reputation: 1472

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>

Upvotes: 0

th1nkful
th1nkful

Reputation: 118

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>

Upvotes: 2

M-Chen-3
M-Chen-3

Reputation: 2054

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>

Upvotes: 1

jason_r
jason_r

Reputation: 345

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>

Upvotes: 0

Related Questions