javascript - JavaScript 代码中的空变量

Question

它一直说我的变量为空，即使它被分配给 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 不会删除任何先前的事件处理程序。