JavaScriptボタンイベントハンドラが動作しません

私はjavasciptを学んでいますが、今はコードがありますが、これを動作させることができません.JavaScriptは実行されません。私はすでにウェブを検索しましたが、私は答えを見つけることができません。たぶんあなたたちはこれで私を助けることができます。 $(document).ready(function(){})関数の内部JavaScriptボタンイベントハンドラが動作しません

$('#click').click(function(){ 
    waarde.amount = waarde.amount + 1; 
    updateValues(); 
});

：

HTML

<html> 
<head> 
    <title>Text Game</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <script type="text/javascript" src="javascript.js"></script> 
</head> 
<body> 
     <button><span id="click">0</span></button> 
</body> 
</html>

Javascriptを

// Variables 
var waarde = { 
    amount:2 
}; 

$(document).ready(function() { 
    updateValues(); 
}); 

function updateValues() { 
    document.getElementById("click").innerHTML = waarde.amount; 
} 

$('#click').click(function() { 
    waarde.amount = waarde.amount + 1; 
    updateValues(); 
});

出典

2016-06-20 Stixs

+11

でボタンクリックイベントが欠落しているhere

で見ることができますJavaScriptの開発者、私はタイトルが大好きです。 :) – Veera

エラーが生じますか？ – Cristy

働いていないとはどういう意味ですか？ご指定ください。また、JSで作業している間は常にブラウザコンソールを確認してください。あなたの '.click（）'ハンドラが外部にある場合、 '$（document）.ready（'）を使用していません。 –

です次のいずれかまたはすべてを実行してください：

scriptタグをフッターの末尾、つまり</body>タグの前に移動します（とにかく一般的にはベストプラクティス）。
将来の要素のイベントにバインドする場合はevent delegationを使用してください。
すべてのJavaScriptをreadyハンドラに入れます。

問題＃2：

あなたはbutton内部要素のクリックイベントハンドラをバインドするべきではありませんbuttonがイベントを消費し、それが伝播されないよう、それが仕様に準拠し、ブラウザでは動作しません子供たちに。

参照用HTML5 spec for buttonを参照してください：

コンテンツモデル：

フレージングのコンテンツを、ないインタラクティブなコンテンツの子孫があってはなりません。

代わりに、クリックイベントハンドラをbuttonにバインドします。

// Variables 
 
var waarde = { 
 
    amount: 2 
 
}; 
 

 
$(document).ready(function(){ 
 
    updateValues(); 
 
}); 
 

 
function updateValues(){ 
 
    document.getElementById("click").innerHTML = waarde.amount; 
 
} 
 

 
// Binding to the button element using event delegation. 
 
$(document).on('#button').click(function(){ 
 
    waarde.amount = waarde.amount + 1; 
 
    updateValues(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="button"><span id="click">0</span></button>

あなたが何か他のもののためにspan要素を必要としない限り、また、あなたはそれを取り除くことができ、ちょうど使用：

document.getElementById("button").innerHTML = waarde.amount;

出典

2016-06-20 16:50:42

あなたの説明と例をありがとうございました。 – Stixs

あなたは、このコードを配置する必要があります。 $('#click')はまだDOMにはありません。

出典

2016-06-20 16:45:20 aprok

readyメソッド内にラップする必要があります。

問題＃1：

要素はまだにバインドするためにDOMに存在しません

// Variables 
    var waarde = { 
     amount:2 
    }; 

    $(document).ready(function() { 

     $('#click').click(function() { 
     waarde.amount = waarde.amount + 1; 
     updateValues(); 
     }); 
    }); 

    function updateValues() { 
    document.getElementById("click").innerHTML = waarde.amount; 
    }

は、ここであなたがここでの問題のカップルを持っているcodepenリンクhttp://codepen.io/anon/pen/vKXQza

出典

2016-06-20 16:49:03 akinjide

2点：

あなたはあなたのjQueryイベントリスナをdocument.readyの中に置くべきです。

spanのclickイベントを処理する保証はありません。

// Variables 
 
var waarde = { 
 
amount:2 
 
}; 
 

 
$(document).ready(function(){ 
 
updateValues(); 
 

 
$('#click2').click(function(){ 
 
waarde.amount++; 
 
updateValues(); 
 
}); 
 

 
}); 
 

 
function updateValues(){ 
 
document.getElementById("click2").innerHTML = waarde.amount; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<button id="click2">0</button>

出典

2016-06-20 16:51:11 Mojtaba

あなたのコードの問題では、JavaScriptがjsのファイルをロードするときにイベントハンドラを割り当てていないです。これは、準備関数で呼び出される必要があります。

var waarde = {  
    amount:2  
}; 

$(document).ready(function(){  
    $('#click').click(function(){ 

     waarde.amount = waarde.amount + 1;  
     updateValues();  
    }); 

}); 

function updateValues(){  
    document.getElementById("click").innerHTML = waarde.amount;  
}

出典

2016-06-20 16:52:56 sam

あなたはdocument.ready

var waarde = { 
     amount: 2 
    }; 

    $(document).ready(function() { 
     $('#click').click(function() { 
      waarde.amount = waarde.amount + 1; 
      updateValues(); 

     }); 
     updateValues(); 
    }); 

    function updateValues() { 
     document.getElementById("click").innerHTML = waarde.amount; 
    }

出典

2016-06-20 16:59:13 Ram

にイベントを書き込む "をクリックして" する必要があなたの問題の解決策は、あなたがしたよう$(document).ready(function(){}(;

出典

2016-06-20 17:40:59 Developer

JavaScriptボタンイベントハンドラが動作しません

答えて

関連する問題