3

私は非常に単純なことをしようとしています - ボタンがクリックされたときに関数を呼び出します。私は W3Schools などのいくつかの例をオンラインで見てきましたが、(私は信じています) onclick / onClick を正しく使用していますが、機能していないようです。いくつかの異なる方法を試しましたが、何が間違っているのかよくわかりません。

方法 1

HTML

<button id="buttonAdd" onclick="add()">Add</button>

JavaScript

function add() {
    console.log("Test"); 
}

結果：

テスト

ボタンをクリックすると、簡単に確認できるよりも速く console.log に表示されてから消えます。

方法 2

HTML

<button id="add">Add</button>

JavaScript

window.onload = function() {
    document.getElementById("add").onclick = add; 
} 

function add() {
    console.log("Test"); 
}

結果

テスト

ボタンをクリックすると、簡単に確認できるよりも速く console.log に表示されてから消えます。

方法 3

HTML

<button id="add">Add</button>

JavaScript

window.onload = function() {
    document.getElementById("add").onclick = add(); 
} 

function add() {
    console.log("Test"); 
}

結果

テスト

これはコンソール ログに表示され、ボタンがクリックされなくてもそこに残ります。

問題

私は一般的に混乱しています。私が言えることは、例で示唆されていることを行っていることです (私が試したさまざまな方法は、例の違いを反映しています)。

ありがとう。

編集

問題は、console.log が目に見えるよりも速く点滅しているようです. ページ自体が更新されているようですが、なぜそうなるのかわかりません...

答え

ボタンは、クリックするとページが更新される形式でした。

4

4 に答える 4

8

問題は関数の名前です。要素の id と同じです。これを書いてみてくださいconsole.log(add)。関数ではなく DOM ノードをログに記録することがわかります。

あなたのボタンはフォームにありますか？その場合、フォームが送信され、ページが更新されるからです。テストでjsfiddleを投稿できますか?

于 2013-04-11T13:09:02.483 に答える
1

方法 1 について:

確かに言うには、HTML構造をもう少し見る必要がありますが、方法1のように聞こえますが、関数はスコープ内で適切に宣言されていません。これは、 theBrain が述べたように、名前が同じであることに関係している可能性があります。または、他の問題が原因である可能性もあります。

編集: theBrain への応答から、別の名前を使用すると、方法 1 を機能させることができるように思えます。そのため、 onclick を変更して return false 値を含めることで、ページの投稿を防ぐこともできます。次のいずれかが機能します。

<button id="buttonAdd" onclick="add(); return false;">Add</button>

また

<button id="buttonAdd" onclick="return add();">Add</button>

関数のコードreturn false;の最後の行としての追加と相まって。add()

方法 2 について:

どちらの場合も、方法 2 がこれを実装するためのより良い方法であるため、方法 1 が失敗する理由を無視することができます (ただし、機能とボタン要素に明確に異なる名前を付けるのは確かに良い方法です。個人的には、序文を述べます)。 「btn_」を含むすべてのボタン ID)。

type両方の方法でコンソールが超高速でクリアされる理由として考えられるのは、ボタンに対して が宣言されていないことです。タイプが存在しない場合、ブラウザーによって動作が異なります ( W3Schools ボタン タグのヒントを参照)。あなたのブラウザーは、これを送信ボタンとして扱っているようです。つまり、クリックするとページにポスト バックします。type='button'ボタン要素の属性内で指定することで、この動作を防ぐことができるはずです。

方法3について：

最後に、メソッド 3 は、代入ステートメントが関数の呼び出しも実行しているための動作を提供していadd()ます。

于 2013-04-11T13:21:31.167 に答える
0

ボタンをクリックすると、簡単に確認できるよりも速く console.log に表示されてから消えます。

これは疑わしいです。通常、コンソール出力はユーザーの操作なしではクリアされません。

ページがリロードされ、コンソール出力が「消える」可能性がありますか?

一般に、この種の「昔ながらの」イベント処理を使用するべきではありません (非常に小規模なものでない限り)。

jQuery などの一般的な JS ライブラリを見てみましょう。これらのライブラリは、(とりわけ) イベント処理を大幅に簡素化します。

于 2013-04-11T13:08:55.440 に答える