0

これが私のコードです：

<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 の「メッセージ」を変更したいと考えています。しかし、それは機能しません。その理由はわかりません。コードを何度も見直しました。別の目が役立つと思います。

4

3 に答える 3

1

id の要素から値を取得しようとしましたが、courseそのような要素はありません。

select使用したいのはだと思います：

<select name="course" id="course" class="ddList">
于 2013-04-21T01:16:06.033 に答える
0

これは、jQuery のクリック イベントを使用したほうがよいと思います。クリック イベントを使用すると、デザインを 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;
});
于 2013-04-21T01:14:45.277 に答える
0

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">
于 2013-04-21T01:32:19.957 に答える