0

ボタンをクリックしても、html で関数を呼び出さない限り何も起こりません。すべてのインライン JavaScript を削除しようとしています。機能するhtmlのコメントアウトされたセクションを含めました。助けてくれてありがとう！

JavaScript:

var welcomeString;
const TEST = 1;

function setWelcomeString() {
    "use strict";
    welcomeString = prompt("Please enter your name: ", "nobody");
}

function writeOutput() {
    "use strict";
    document.getElementById("demo").innerHTML = "Hello, " + welcomeString;
}

function main() {
    "use strict";
    setWelcomeString();
    document.getElementById("sayHi").onclick = writeOutput();
}

main();

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>**SET TITLE**</title>
        <link href="css/style.css" rel="stylesheet">
        <script src="firstScript.js"></script>
    </head>

    <body>
        <h1 id="wiggles">TEMPLATE</h1>
        <!--<button id="sayHi" onclick="writeOutput()">Say Hi</button>-->
        <button id="sayHi">Say Hi</button>
        <p id="demo"></p>
    </body>
</html>
4

3 に答える 3

4

関数をイベントのハンドラーとして割り当てるときは、関数を実行してその戻り値を割り当てるのではなく、関数自体を割り当てる必要があります。これを変える：

document.getElementById("sayHi").onclick = writeOutput(); // parens

これに：

document.getElementById("sayHi").onclick = writeOutput; // no parens

これは、実際の例を含むjsfiddle リンクです。

于 2013-01-25T16:04:46.290 に答える
1

2つの問題があります。

最初はjbabeyによってカバーされています。

2つ目は、firstScript.jsがボタンの前に表示されることです。onClickこれは、ハンドラーを割り当てる場合と同様に問題があります。それはdomには存在しません。

メインスクリプト全体を中に入れるwindow.onload = function () { ... }か、マークアップの一番下に移動してみてください。

于 2013-01-25T16:12:09.273 に答える
1

loadこのように、コード全体を の中に追加する必要があります

window.load = function(){
    // your javascript here
};

また、jbabeyが述べたように、いずれかを使用します

document.getElementById("sayHi").onclick = function(){ writeOutput();};

または

document.getElementById("sayHi").onclick = writeOutput;
于 2013-01-25T16:07:02.190 に答える