我不知道如何使我的javascript onclick事件正常工作

Question

當我單擊按鈕時，除非我在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>

Answer 1

當您將函數分配為事件的處理程序時，您需要分配函數本身，而不是執行函數，並在執行操作時分配其返回值。 更改此：

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

對此：

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

這是帶有工作示例的jsfiddle鏈接。

Answer 2

您必須像這樣將整個代碼添加到load

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

另外，如jbabey所述，請使用

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

要么

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

Answer 3

你有兩個問題。

第一個被jbabey覆蓋。

第二個是firstScript.js出現在您的按鈕之前。 這是有問題的，因為當您為其分配onClick處理程序時。 它在dom中不存在。

嘗試將整個主腳本放入window.onload = function () { ... }或將其移至標記的底部。

我不知道如何使我的javascript onclick事件正常工作

問題描述

3 個解決方案

解決方案1
4 已采納 2013-01-25 16:04:46

解決方案2
1 2013-01-25 16:07:02

解決方案3
1 2013-01-25 16:12:09

我不知道如何使我的javascript onclick事件正常工作

問題描述

3 個解決方案

解決方案1 4 已采納 2013-01-25 16:04:46

解決方案2 1 2013-01-25 16:07:02

解決方案3 1 2013-01-25 16:12:09

解決方案1
4 已采納 2013-01-25 16:04:46

解決方案2
1 2013-01-25 16:07:02

解決方案3
1 2013-01-25 16:12:09