CODEWITHSUNDEEP
javascripthtmlbuttondrop-down-menudropdown
Grayish
Grayish

Reputation: 187

HTML & Javascript - make text appear when dropdown menu option selected

So I'm new to html/javascript and I'm trying to figure out how to make my dropdown menu work properly. Appearance wise it looks fine, but when I click on any of the options I'm trying to figure out how to change the layout of the page based on the option I picked. So for example if I select option 1 and click the 'select' button, I want regular text to appear saying "You clicked option 1." I tried to implement that but it's not doing anything. If I click 'select' without choosing an option, then an error message should pop up. I would really appreciate some help or a push in the right direction.

options.html: 

<html>
    <head>
        <title>Welcome</title>

    </head>
    <body onload="init()">
        <div><h1>Welcome</h1></div><br />
    <div class="dropdown">
        <form>
        <select name="list" id="list" accesskey="target">
            <option value="none">Pick an option</option>
            <option value="one">Option 1</option>
            <option value="two">Option 2</option>
            <option value="three">Option 3</option>
        </select>
        <input type=button value="Select" onclick="goToNewPage()" />
        </form>
        </div>
    </div>
        <script src="options.js"></script>
        <link rel="stylesheet" href="dropdown.css">
    </body>
</html>

options.js:

function optionClicked(){
    let userPicked = document.getElementById("dropdown").value;
    if(userPicked == 'one'){
        div.innerHTML = "You clicked option 1";
    }else if(userPicked == 'two'){
        div.innerHTML = "You clicked option 2.";
    }else if(userPicked == 'three'){
        div.innerHTML = "You clicked option 3.";
    }else{
        alert("You must pick an option.");
    }
}

Upvotes: 0

Views: 2973

Answers (3)

100PercentVirus
100PercentVirus

Reputation: 17

I solved the problem by using jquery. Also, your html code has a stray div end tag. You should check that out.

<html>
    <head>
        <title>Welcome</title> 
    </head>
    <body>
        <div><h1>Welcome</h1></div><br />
    <div class="dropdown">
        <form>
        <select name="list" id="list" >
            <option value="none">Pick an option</option>
            <option value="one">Option 1</option>
            <option value="two">Option 2</option>
            <option value="three">Option 3</option>
        </select>
        <input type=button value="Select" onclick="optionClicked()" />
        </form>
    </div> 
        <div id="div"></div> 
        <script src='jquery.min.js'></script>  <!-- include jquery-->
        <script>
            function optionClicked()
            {
                var userPicked = $(`#list`).children("option").filter(":selected").val().trim();
                switch(userPicked)
                {
                    case 'one': div.innerHTML = "You clicked option 1"; break; 
                    case 'two': div.innerHTML = "You clicked option 2."; break; 
                    case 'three': div.innerHTML = "You clicked option 3."; break; 
                    default: 
                         alert("You must pick an option."); break; 
                } 
            }
        </script> 
        <link rel="stylesheet" href="dropdown.css">
    </body>
</html>

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

  • You could use an Object literal to store your messages by select's value.
  • Don't use inline JS. It's hard to debug.
  • Use addEventListener()
  • Use the proper elements ID

const EL_list = document.querySelector('#list');
const EL_select = document.querySelector('#select');
const EL_response = document.querySelector('#response');
const messages = {
  none: "You must pick an option.", 
  one: "You selected option 1",
  two: "You selected option 2",
  three: "You selected option 3",
};

EL_select.addEventListener('click', evt => {
  const val = EL_list.value;
  const msg = messages[val];
  
  if (val==='none') alert(msg);
  else EL_response.textContent = msg;
});
<div class="dropdown">
  <select name="list" id="list">
    <option value="none">Pick an option</option>
    <option value="one">Option 1</option>
    <option value="two">Option 2</option>
    <option value="three">Option 3</option>
  </select>
  <input id="select" type="button" value="Select">
  <div id="response"></div>
</div>

Upvotes: 0

alanfcm
alanfcm

Reputation: 663

As pointed in a comment, you need to address the right id and function name like this:

function optionClicked(){
    let userPicked = document.getElementById("list").value;
    var div = document.getElementById("div");
    if(userPicked == 'one'){
        div.innerHTML = "You clicked option 1";
    }else if(userPicked == 'two'){
        div.innerHTML = "You clicked option 2.";
    }else if(userPicked == 'three'){
        div.innerHTML = "You clicked option 3.";
    }else{
        alert("You must pick an option.");
    }
}
<html>
    <head>
        <title>Welcome</title>

    </head>
    <body>
        <div><h1>Welcome</h1></div><br />
    <div class="dropdown">
        <form>
        <select name="list" id="list" accesskey="target">
            <option value="none">Pick an option</option>
            <option value="one">Option 1</option>
            <option value="two">Option 2</option>
            <option value="three">Option 3</option>
        </select>
        <input type=button value="Select" onclick="optionClicked()" />
        </form>
        </div>
    </div>
    <div id="div"></div>
        <script src="options.js"></script>
        <link rel="stylesheet" href="dropdown.css">
    </body>
</html>

Upvotes: 1

Related Questions