javascript - チェックボックスがチェックされているときにテキストボックスを更新するにはどうすればよいですか?

Question

次のコードがありますが、なぜ機能しないのかわかりません。

JavaScript:

    function hourmin() {
        if (document.getElementById('hourmin').checked == 1){
            document.getElementById('total').value = "01:00";
        }else{
            document.getElementById('total').value = "00:00";
        }
    }

HTML:

    <p>Total Time: <BR><input type="text" style="width:95%;" id="total" name="total" value="" readonly="readonly"/>
    <input type="checkbox" id="hourmin" name="hourmin"  onclick="hourmin();">Pay Hour Minimum?

score 2 · Accepted Answer

JSFiddle で間違ったオプションを使用しています

http://jsfiddle.net/EQHRV/3/

オプション onLoad は、スクリプト全体を window.onload にラップするため、関数はグローバルスコープではアクセスできなくなります。

window.onload = function(){
    //your code
}

に変更します

No wrap - in HEADまたNo wrap - in BODY

ここに画像の説明を入力

参照を作成することにより、グローバルスコープで変数/関数を強制的に使用できるようにすることもできますwindow

window.hourmin = function(){
    ...
}

ただし、次のようなインラインスクリプトの使用を避けることをお勧めしますonclick="etc()"

http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/ http://www.unicodegirl.com/from-inline- events-to-addeventlistener.html

編集：

これがあなたのウェブサイトで機能しない原因となっている可能性のある問題

要素 ID は一意である必要があります
javascript は大文字と小文字を区別hourminしますと同じではありませんhourMin
インラインイベントを使用しているため、呼び出された関数はグローバルスコープにある必要があります。別の関数内にネストされていないことを確認してください
ドキュメントの構文エラーを確認してください
WebInspector はあなたの友達です

Safari - WebInspector
Chrome - DevTools
Opera - トンボ

score 1 · Accepted Answer

あなたのコードは問題ありませんが、onchange代わりに使用することをお勧めしますonclick

<p>Total Time: <BR><input type="text" style="width:95%;" id="total" name="total" value="" readonly="readonly"/>
<input type="checkbox" id="hourmin" name="hourmin"  onchange="hourmin()">Pay Hour Minimum?

デモ

あなたのサイトでは機能しません。同じIDを持つ複数の要素の問題である可能性があります

デモ

このデモではdiv、同じ id: で別のものを作成しますhourmin。正しく動作しないことがわかります。

重複した ID があるかどうかを判断するのに問題がある場合。引数でチェックボックスを取得できますし、取得する必要がありますeventonchange="hourmin(event)

デモ