CODEWITHSUNDEEP
javascripthtmlinnerhtml
user2303425
user2303425

Reputation: 3

html syntax error, innerHTML isn't working

Here's my code:

<html>
    <style type="text/css">
        select {font-family: helvetica; font-size:24; text-align:center; width: 400px;}
        #message {font-family:helvetica; font-size:24; text-align:center;}
    </style>
    <table>
        <tr>
            <td>
                <select name="course" class="ddList">
                    <option value=""> (please select a course) </option>
                    <option value="physics">Physics</option>
                    <option value="calc">Calculus</option>
                    <option value="stats">Statistics</option>
                    <option value="engl">English</option>
                    <option value="hist">US History</option>
                    <option value="compsci">Computer Science</option>
                </select>
            </td>    
            <td>
                <button onClick="showCourse()">Describe me!</button>
            </td>
        </tr>
    </table>
    <div id="message">Please select a course.</div>

    <script>
        function showCourse(){
            var op = document.getElementById("course").value;
            var desc = "";
            if(op == "physics")
                desc = "Description of AP physics goes here...";
            else if(op == "calc")
                desc = "Description of AP calculus goes here...";
            else if(op == "stats")
                desc = "Description of AP statistics goes here...";
            else if(op == "engl")
                desc = "Description of AP english goes here...";
            else if(op == "hist")
                desc = "Description of AP US history goes here...";
            else if(op == "compsci")
                desc = "Description of AP computer science goes here...";
            else
                desc = "Please select a course to see the description."
            document.getElementById("message").innerHTML = desc;
        }
    </script>
</html>

Basically I want the div "message" to be modified by the option selected in the dropdown menu. However it doesn't work, and I'm not sure why. I've looked over the code multiple times. I think another pair of eyes will help.

Upvotes: 0

Views: 560

Answers (3)

ole
ole

Reputation: 5233

First, you should move tag script to top, before you calling function showCourse():

<html>
<style type="text/css">
    select {font-family: helvetica; font-size:24; text-align:center; width: 400px;}
    #message {font-family:helvetica; font-size:24; text-align:center;}
</style>

<script>
    function showCourse(){
        var op = document.getElementById("course").value;
        var desc = "";
        if(op == "physics")
            desc = "Description of AP physics goes here...";
        else if(op == "calc")
            desc = "Description of AP calculus goes here...";
        else if(op == "stats")
            desc = "Description of AP statistics goes here...";
        else if(op == "engl")
            desc = "Description of AP english goes here...";
        else if(op == "hist")
            desc = "Description of AP US history goes here...";
        else if(op == "compsci")
            desc = "Description of AP computer science goes here...";
        else
            desc = "Please select a course to see the description."
        document.getElementById("message").innerHTML = desc;
    }
</script>
<table>
    <tr>
        <td>
            <select name="course" class="ddList">
                <option value=""> (please select a course) </option>
                <option value="physics">Physics</option>
                <option value="calc">Calculus</option>
                <option value="stats">Statistics</option>
                <option value="engl">English</option>
                <option value="hist">US History</option>
                <option value="compsci">Computer Science</option>
            </select>
        </td>   
        <td>
            <button onClick="showCourse()">Describe me!</button>
        </td>
    </tr>
</table>
<div id="message">Please select a course.</div>
</html>

Second, You forgot to specify the id attribute in the select tag:

<select name="course" id="course" class="ddList">

Upvotes: 0

stephenthedev
stephenthedev

Reputation: 577

I think this is better done using a jQuery click event. Using the click event helps to separate your design from your JavaScript, which is always a good thing.

Here's a working JSFIDDLE: http://jsfiddle.net/paxm8/

HTML:

<select id='course' name="course" class="ddList">
            <option value=""> (please select a course) </option>
            <option value="physics">Physics</option>
            <option value="calc">Calculus</option>
            <option value="stats">Statistics</option>
        </select>
        <button id='showcourse' >Describe me!</button>

        <div id="message">Please select a course.</div>

JS:

$(document).on("click","#showcourse",function(){
var op = document.getElementById('course').value
       if(op == "physics")
        desc = "Description of AP physics goes here...";
    else if(op == "calc")
        desc = "Description of AP calculus goes here...";
    else if(op == "stats")
        desc = "Description of AP statistics goes here...";
    else if(op == "engl")
        desc = "Description of AP english goes here...";
    else if(op == "hist")
        desc = "Description of AP US history goes here...";
    else if(op == "compsci")
        desc = "Description of AP computer science goes here...";
    else
        desc = "Please select a course to see the description."
    document.getElementById("message").innerHTML = desc;
});

Upvotes: 0

Guffa
Guffa

Reputation: 700362

You try to get the value from the element with the id course, but there is no such element.

I assume that it's the select that you want to use:

<select name="course" id="course" class="ddList">

Upvotes: 1

Related Questions