html syntax error, innerHTML isn't working

Question

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.

Guffa · Accepted Answer · 2013-04-21 01:16:06Z

1

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

answered Apr 21, 2013 at 1:16

Guffa

703k112 gold badges760 silver badges1k bronze badges

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

Comments

stephenthedev · Accepted Answer · 2013-04-21 01:29:21Z

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;
});

ole · Accepted Answer · 2013-04-21 01:38:28Z

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

Collectives™ on Stack Overflow

html syntax error, innerHTML isn't working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related