0

各質問のオプションを選択して、Web サイトのユーザーに質問に回答してもらいたいと考えています。正解を選択すると、正解を示した段落が緑色になり、現在のページをリロードせずに同じ手順で次の質問に回答し続けることができます。

これは「onClick」イベントで機能しますが、正しい答えが選択されてから別のものに置き換えられた場合、DIV は新しく追加された同じクラスを保持します。そのため、ここでは機能しない onSelect を使用したいと思います...

誰でも私を助けることができますか？ありがとうございました

<script language="javascript">

    function change_class1() {
        var p_l1 = document.getElementById("p_langue1");
        p_1.className = "point_langue";
    }

    function change_class2() {
        var p_l2 = document.getElementById("p_langue2");
        p_2.className = "point_langue";
    }

    function change_class3() {
        var p_l3 = document.getElementById("p_langue3");
        p_3.className = "point_langue";
    }

</script>>

<h3>QUESTIONS & ANSWERS</h3>

<div id="p_langue1">
    <p>Question 1</p>
    <select>
        <option>A</option>
        <option onselect="change_class1()">B</option>
    </select>
</div>

<div id="p_langue2">
    <p>Question 2</p>
    <select>
        <option onselect="change_class2()">A</option>
        <option>B</option>
    </select>
</div>

<div id="p_langue3">
    <p>Question 3</p>
    <select>
        <option onselect="change_class3()">A</option>
        <option>B</option>
    </select>
</div>
4

2 に答える 2

2

Javascript -デモ

 <h3>QUESTIONS & ANSWERS</h3>

<div id="p_langue1">
    <p>Question 1</p>
    <select onchange="change_class('p_langue1',this.value)">
        <option>A</option>
        <option>B</option>
    </select>
</div>
<div id="p_langue2">
    <p>Question 2</p>
    <select onchange="change_class('p_langue2',this.value)">
        <option>A</option>
        <option>B</option>
    </select>
</div>
<div id="p_langue3">
    <p>Question 3</p>
    <select onchange="change_class('p_langue3',this.value)">
        <option>A</option>
        <option>B</option>
    </select>
</div>

 function change_class(selectedId, answer) {
     var selectedValue = document.getElementById(selectedId);
     if (answer == 'A') {
         selectedValue.className = "point_langue";
     } else {
         selectedValue.className = "";
     }
 }

.point_langue {
    color :green;
}
于 2014-09-03T07:38:10.583 に答える