2016-09-23 7 views
0

何をしようとしているのは、誰かが自分のボタンをクリックするたびに私の関数を呼び出すことです。しかし、私はそれがボタンからの警告機能の呼び出し(onclickを使用しない)

<button onclick="myFuntion()> 

で行うことができることを知っているが、私はそのステップをスキップしたい、私は私のボタンで機能をたくない、私はその悪いプログラミングと聞きました。

しかし、私のファイルがどのように見えるかを調べます。

<!DOCTYPE html> 
<html> 

<head> 
<meta charset="UTF-8"> 
<script type="text/javacript" src="javascript.js"> </script> 
<title> Javascript </title> 

<script> 

function testFunction(){ 
document.getElementById("test").onclick = Hello; 
} 
function Hello(){ 
    alert("Hello"); 
} 
</script> 
</head> 

<body> 
<button type="button" id="test" <!-- I know i can use onclick="testFunction()" here but i dont wanna !-->> Click me </button> 

</body> 

</html> 

私はボタンを押すたびに「こんにちは」ボックスをポップアップしていないのですが、どうしましたか?

+0

をですから、クリックイベントに関数を添付する必要はありませんし、あなたがそれをクリックしたとき、それは機能を実行していない理由を求めています?クリックイベントは*のためのものです。問題が何であるかははっきりしていません。 – David

+2

どこにでもtestFunctionを呼び出すことはないので、clickイベントはボタンに追加されません。 – epascarello

+0

質問は:これを行うために設計されたonclickをなぜ使用しないのですか? – andreaem

答えて

5

HTMLボディがロードされた後にtestFunctionに電話をかけて、実際にバインディングを作成する必要があります。ファイルの末尾に、ある

は、あなたのような何かをしたい:

... 
<script> 
    testFunction() 
</script> 
</body> 
... 

あなたheadスクリプト内のコードを結合button要素がまだ  —であることが存在しないことを実行した場合なぜこれが最後になければならないのか?

jQueryのようなJavaScriptライブラリでは、readyフックを提供することにより、より洗練されたフックが作成されます。フックは、ページが完全に読み込まれると呼び出されます。

scriptの末尾にという完全な例があります(紛らわしく、Stack Snippetはスニペットに実際に表示されている順序では表示されません;そのように見えなくてもスクリプトはここにあります)

// Scoping function to avoid creating unnecessary globals 
 
(function() { 
 
    // The click handler 
 
    function Hello() { 
 
    alert("Hello"); 
 
    } 
 

 
    // Hooking it up -- you *can* do it like you did: 
 
    //document.getElementById("test").onclick = Hello; 
 
    // ...but the modern way is to use addEventListener, 
 
    // which allows for more than one handler: 
 
    document.getElementById("test").addEventListener(
 
    "click", Hello, false 
 
); 
 
})();
<button type="button" id="test">Click me</button>

+0

または、実際には、すべてのスクリプトコードを最後の 'script'要素に移動します。 –

+0

ええと。そうですね。 でも、私はwindow.onload = Helloを使ってみました。それはできませんでした。あなたがそれを行うには、体の底にある関数を呼び出すことだけです。 –

+1

'window.onload = Hello;' < - これは、clickイベントをバインドしているものではなく、アラート関数を呼び出しています.... – epascarello

0

window.onload=testFunction; 
 
function testFunction(){ 
 
document.getElementById("test").onclick = Hello; 
 
} 
 
function Hello(){ 
 
    alert("Hello"); 
 
}

+0

あなたはウィンドウの読み込みにその関数を読み込む必要があります。 – jsquerylover

関連する問題