Question

这是我的代码：

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

基本上我希望通过下拉菜单中选择的选项修改div“消息”。但它不起作用，我不知道为什么。我多次查看过代码。我认为另一双眼睛会有所帮助。

Answer 1

您尝试从ID为course的元素中获取值，但没有这样的元素。

我认为你想要使用的是select：

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

Answer 2

我认为使用jQuery click事件可以做得更好。使用click事件有助于将您的设计与JavaScript分开，这总是一件好事。

这是一个有效的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;
});

Answer 3

首先，在调用函数script之前，应将标记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>

其次，您忘记在select标记中指定id属性：

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

html语法错误，innerHTML不起作用

3 个答案: