Question

新秀警报！你能告诉我为什么我的Javascript代码没有更新消息。浏览器运行HTML但忽略了Javascript代码。我究竟做错了什么？

<!DOCTYPE html>

<html>
<head>
  <title>Basic Function </title>

  <script type="text/javascript">


var msg = 'Sign up to receive our newsletter for 10% off!';

function updateMessage() {
  var el = document.getElementById('message');
  el.textContent = msg;
}

updateMessage();
  </script>
</head>
<body>
<h1> Travel Worthy </h1>
<div id="message">Welcome to our site! </div>  
  </body>
</html>

Answer 1

您在加载正文之前运行Javascript，message元素尚不存在。将脚本移动到<body>的末尾，或将最后一行更改为：

window.onload = updateMessage;

以便在加载HTML后加载该函数。

Answer 2

如果<script>标记位于<head>元素中，则会在创建<body>中的HTML元素之前执行该标记。您可以将脚本标记放在<body>元素的末尾，以解决问题。

Answer 3

假设您没有禁用javascript，则可以在代码周围添加window.onload=function(){。

window.onload=function(){


    var msg = 'Sign up to receive our newsletter for 10% off!';

    function updateMessage() {
        var el = document.getElementById('message');
        el.textContent = msg;
    }

    updateMessage();

}

这样做的原因是您的javascript代码位于<head>内。因此，javascript在正文之前加载。当浏览器尝试执行javascript代码时，message元素尚未加载且不存在。通过添加window.onload=function(){来包围您的代码，您的整个代码将等到主体加载后再执行。

Answer 4

当您拨打javascript代码时，＆＃39;消息＆＃39;元素已经存在。我会建议以下两件事之一：

+将您的javascript代码放在body的末尾（请注意，它只需要在＆＃39; message＆＃39;之后，但将其放在最后通常是最佳选择）

+将您的来电替换为window.onload = updateMessage，这将等到所有页面都加载后才能执行您的javascript

Answer 5

这里已经有很多重复的答案，但还有另一种方法，特别是如果你想将你的Javascript代码保存在头部的脚本标签中。也就是说，在setTimeout中包装你的Javascript函数调用 - 这会导致在解析DOM之后但在整个窗口加载之前执行函数。

当您没有框架（例如jQuery）文档/就绪功能时，可以使用这个巧妙的小技巧。如果页面中有大量重量级内容（大图片？），window.onload或将脚本置于底部可能会导致严重延迟。

<!DOCTYPE html> <html> <head> <title>Basic Function </title> <script type="text/javascript"> var msg = 'Sign up to receive our newsletter for 10% off!'; function updateMessage() { var el = document.getElementById('message'); el.textContent = msg; } setTimeout(updateMessage); </script> </head> <body> <h1> Travel Worthy </h1> <div id="message">Welcome to our site!</div> <img src="http://cdn.spacetelescope.org/archives/images/publicationjpg/heic1502a.jpg" /> </body> </html>

注意我已经在页面中添加了一个非常大的图像，但更新的消息在图像完全加载之前显示。

但是，如果您使用当前接受的答案中建议的setTimeout(updateMessage);代替window.onload = updateMessage;，则在整个图片加载之前，您的消息将不会更新（如果您尝试这样做，请确保执行此操作第一次之后硬刷新，所以你没有从缓存中获取它。将脚本移动到页面下方（例如，在非常大的图像下方）也是如此，如下所示。老实说，如果你没有框架的文档/就绪功能，在头部的脚本块中使用setTimeout是最好的解决方案。

在图像加载后消息不会更新

<!DOCTYPE html> <html> <head> <title>Basic Function </title> </head> <body> <h1> Travel Worthy </h1> <div id="message">Welcome to our site!</div> <img src="http://cdn.spacetelescope.org/archives/images/publicationjpg/heic1502a.jpg" /> </body> <script type="text/javascript"> var msg = 'Sign up to receive our newsletter for 10% off!'; function updateMessage() { var el = document.getElementById('message'); el.textContent = msg; } updateMessage(); </script> </html>

Answer 6

您正在尝试在加载DOM之前进行更改。请参阅下面的代码，

<!DOCTYPE html>

<html>
<head>
  <title>Basic Function </title>     
</head>
<body>
<h1> Travel Worthy </h1>
<div id="message">Welcome to our site! </div>  
</body>
<script type="text/javascript">

var msg = 'Sign up to receive our newsletter for 10% off!';

function updateMessage() {
  var el = document.getElementById('message');
  el.textContent = msg;
}

updateMessage();
</script>
</html>

浏览器会忽略Javascript

6 个答案: