Question

JavaScript 代码中的空变量

2017-04-05

101

javascript

尽管我的变量已分配给 HTML 中的按钮，但它一直显示为空。按钮按下后无法正常工作。变量为“clickMe”

var yourName;   //global variable accessible to all functions

function showAnotherMessage() {
    alert("Hi " + yourName + ".\nThis is an alert message is no longer defined\nin the HTML but in a JavaScript file");
}

function init() {
    yourName = prompt("Hi. Enter your name.\nWhen the browser window is first loaded\nthe function containing this prompt window is called.", "Your name");
    var clickMe = document.getElementById("buttonclick");
  clickMe.onclick = showAnotherMessage;
    }

window.onload = init();

Answer 1

避免使用 window.onload ，因为它在页面生命周期中触发得太晚 - 它仅在 所有内容 （包括所有图像）加载后触发 - 这可能在页面加载后几秒钟内完成。

相反，请使用 DOM 事件 API，并使用 DOMContentLoaded 事件：

window.addEventListener('DOMContentLoaded', function(e) {

    // page startup code goes here
} );

避免使用 window.onload = ... 的另一个原因是，它将覆盖 onload 事件的任何先前事件处理程序，而 addEventListener 不会删除任何先前事件处理程序。