プログラミングBlog

JavaScript onClickEvent

onclickイベントの動作

ドロップダウンリストから数値を選択して、"2"の場合は非活性にする機能があるとします。 oncick()イベントはクリックした時に起こるイベントのため、 選択中に別の場所をクリックすると動画のような不具合が起こります。 f:id:Tokuty:20201028215557g:plain

以下実装コード

html 修正前

    <form>
        <select id="list_box" onclick="func()" name="num">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <input type="submit" value="送信">
    </form>

js

function func() {
    const list_box = document.getElementById('list_box');
    if (list_box.value === "2") {
        list_box.disabled = true;
    }
}

選択時のイベントが正しいためonchangeイベントに変更すると問題なく動作しました。

html 修正後

    <form>
        <select id="list_box" onchange="func()" name="num">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <input type="submit" value="送信">
    </form>

イベントの動作タイミングをよく考えて実装しないとだめですね。。 ちなみにIEだと非活性状態のボタンをクリックするとonclickが呼ばれちゃったりするので注意。