Search code examples
javascripthtmlbuttondrop-down-menudropdown

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.");
    }
}
Solution

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