9

嗨，我是 Javascript 新手，我正在尝试获取一个函数，以便在窗口加载后删除一些元素。

这是HTML

<html>
<head>
    <title>Simple Quiz</title>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Quiz</h1>
    <h2>Question</h2>
    <p id="question"></p>
    <form name="choices">
        <fieldset>
            <!-- insert questions here dynamically via javascript! -->
            <label><input type="radio" name="choice" value="1st">First-class</label>
            <label><input type="radio" name="choice" value="2day">2-day Air</label>
            <label><input type="radio" name="choice" value="overnite">Overnight</label>
        </fieldset>
    </form>

</body>
</html>

页面加载后在控制台中调用函数 removeQuestions() 工作正常，但我似乎无法使用窗口的 onload 事件使其工作。有趣的是，它适用于 JSFiddle（在此处找到）但当我在 chrome 中本地启动页面时不起作用。我做错了什么？谢谢

这是 script.js 文件：

// JS executed after window has been loaded
function removeQuestions() {
    var choices = document.forms.choices.elements[0].children;

    // remove choices
    while (choices.length > 0) {
        var choice = choices[0];
        choice.parentNode.removeChild(choice);
    }
}

window.onload = removeQuestions();
4

3 回答 3

25

您没有将函数分配给window.onload，而是调用函数，然后将结果分配给window.onload

替换window.onload = removeQuestions();为window.onload = removeQuestions;

浏览器希望在 onload 中有一个回调函数，以便在加载窗口时调用它。

window.onload = removeQuestions(); 相当于

var result = removeQuestions(); // undefined, the function does not return anything
window.onload = result;
于 2013-08-21T23:29:57.057 回答
3

就我而言，它不起作用，因为我设置window.onload了在同一页面上运行的两个脚本。我花了一些时间才意识到这个错误，因为第一个脚本有 console.log 消息，但第二个脚本没有。浏览器在第一个脚本之后加载了第二个脚本，我的 window.onload = somefunction 现在被设置为一个没有任何 console.log 的函数，给我的印象是它根本不起作用

于 2018-05-11T19:20:59.280 回答
1

为了简化，回调应该是这样的：

window.onload = (event) => {
  console.log('page is fully loaded');
  removeQuestions();
};
于 2022-01-30T06:32:59.717 回答