0

私はそのようなコードを持っていると仮定します

<!DOCTYPE html>
    <html>
    <head>
     </head>
     <body>
    <script type="text/javascript" charset="utf-8">


    var figure = document.getElementById("tool");
    var selected = figure.options[figure.selectedIndex].value;


    if(selected === "pencil"){ 
    alert("Like a pencil");
}

if(selected === 'line'){
alert("Just drag and drop");
}
if(selected === "rect"){ 
    alert("drag and drop for rect");
}
    </script>


    <p><label>Drawing tool: <select id="tool">
        <option value="pencil">Pencil</option>
        <option value="rect">Rectangle</option>
        <option value="line">Line</option>
    </select></label></p>

</body>
</html>

ドロップリストの値を変更しても反応しないのはなぜですか? 多分私はOnChangeを追加する必要がありますか？しかし、私はそれがどのように機能するかわかりませんでした...ありがとう

4

3 に答える 3

1

次のように、そのコードをイベント リスナーに配置する必要があります。

figure.addEventListener('change', function(){    
  // your code...   
});

そして、スクリプトをドキュメントの最後に置きます。

于 2013-05-16T20:09:41.477 に答える
0

あなたのコード

 var figure = document.getElementById("tool");
    var selected = figure.options[figure.selectedIndex].value;


    if(selected === "pencil"){ 
    alert("Like a pencil");
}

if(selected === 'line'){
alert("Just drag and drop");
}
if(selected === "rect"){ 
    alert("drag and drop for rect");
}

ページの読み込み時に実行されます。選択が変更されたときにこのコードを実行するには、上記のようにイベント リスナー (メソッドはすべてのブラウザーで同じではありません) を使用するか、次のようにコールバックを設定します (単一のイベントの場合はより簡単です)。

<select id="tool" onchange="onSelectChange(this);">...

onSelectChange は次のような関数です。

<script type="text/javascript">
    var onSelectChange = function(elt) {
        var selected = elt.options[elt.selectedIndex].value;

        if(selected === "pencil"){ 
            alert("Like a pencil");
        }
        if(selected === 'line'){
            alert("Just drag and drop");
        }
        if(selected === "rect"){ 
            alert("drag and drop for rect");
        }
    };
</script>
于 2013-05-16T20:19:41.760 に答える
0

en event handlerを追加する必要があります。現在のコードは、ページの読み込み時に 1 回だけ実行されます。

window.onload(function() {
   document.getElementById("tool").addEventListener('change',toolChangeEventHandler);
}

function toolChangeEventHandler() {
    if(this.value === "pencil"){ 
        alert("Like a pencil");
    } else if(this.value === "line"){
        alert("Just drag and drop");
    } else if(this.value === "rect"){ 
        alert("drag and drop for rect");
    }
}

イベントリスナーを追加しようとするときに要素が存在することを確認するには、onload イベントが必要です。

于 2013-05-16T20:12:40.217 に答える