在html页面中嵌入javascript部分的位置[重复]答案

【问题标题】：where to embed javascript section in a html page [duplicate]在html页面中嵌入javascript部分的位置[重复]
【发布时间】：2025-12-11 22:15:01
【问题描述】：

问题是我无法确定在 html 页面中嵌入 javascript 的位置，无论是在 head 部分还是 body 部分。

示例 1：

 <html>
      <head>
       <title>events</title>
        <script>
          document.getElementById("b").onclick=function(){displayDate()};
          function displayDate()
          {
            document.getElementById("demo").innerHTML=Date();
          }    
        </script>   
      </head>
      <body>
        <p id="demo"></p>
        <button id="b">new</button>
      </body>
    </html>

在上面的示例中，我在 head 部分放置了脚本标签，但它不起作用。

示例：2

<html>
  <head>
    <title>events</title>
    <script>
      function upper()
      {
        var x=document.getElementById("t"); 
        x.value=x.value.toUpperCase();
      }
    </script>
  </head>
  <body >
    enter some text:<input type="text" id="t" onChange="upper()"/>
  </body>
</html>

在第二个示例中，我将 javascript 放在 head 部分中，它工作正常。第一个示例演示了单击按钮时，当输入数据时，日期将显示在第二个示例中的文本框中，如果我们退出box 将我们将框中的字母转换为大写。

【问题讨论】：

你应该把它放在正文的末尾，就在</body>之前。

标签： javascript

【解决方案1】：

为了使其更具可读性，我更喜欢始终将 JavaScript 放在 head 部分。如果您需要从那里访问元素，请使用window.onload 事件：

<head>
<title>events</title>
<script type="text/javascript">
    window.onload = function() {
        document.getElementById("b").onclick = function() {
            displayDate();
        };
    };

    function displayDate()
    {
        document.getElementById("demo").innerHTML=Date();
    }
</script>
</head>

这样就可以了。

您的第二个示例有效，因为您刚刚定义了一个函数，没有尝试访问任何元素。

【讨论】：

您的解决方案正在运行，但我不明白您的解释。我无法弄清楚为什么您在 window.onload 中只放置了特定的代码块，为什么不放在整个脚本中，而且您在第二个示例没有访问任何元素，但访问了文本框。
@user22002 window.onload 块应该只包含访问 DOM 的代码。所有不访问元素的函数定义和其他代码最好单独使用。
谢谢我明白了。你能不能给我推荐一个学习javascript的好网站，因为我刚开始学习
@user22002: eloquentjavascript.net, developer.mozilla.org/en/JavaScript/Guide
@user22002 除了 Felix 建议之外，您还有两个基本选择。如果您想遵循标准并成为“优秀”的 JavaScript 程序员（而不仅仅是编写有效代码的人），那么您最好 start here。如果您只想以最快的方式学习，但不遵循标准或良好实践，那么您有臭名昭著的w3schools。您的选择。

【解决方案2】：

你可以把它放在头上。问题是你的例子不一样。第一个不起作用，因为当前日期是通过调用Date() 检索的，而它应该是new Data().getDate()。第二个示例有效，因为代码有效。

【讨论】：

【解决方案3】：

您遇到的问题是您试图在将元素加载到 DOM 之前对其进行引用。

当您将脚本放在 HEAD 标记中时，dom 尚未加载，并且 document.getElementById 不会找到您要查找的内容。

你有几个不同的选择来处理这个问题。您可以将脚本放在页面末尾，这将适用于此处的小示例。

也许更好的选择是学习/使用 jquery 或其他 js 实用程序。 Jquery 通过为您提供“就绪”事件来轻松解决此问题。当 DOM 完全加载时，会触发这个 ready 事件。所以：

$(document).ready(
  function()
  {
     $("#demo").html((new Date()).toString());
  });

这就是你真正需要的。使用这种方法，脚本在页面上的位置无关紧要。

【讨论】：

不需要 jQuery，window.onload 就像跨浏览器一样易于使用。
没错，但很明显Shadow Wizard 是javascript 新手，所以学习如何用jquery 做事是一个很好的建议，恕我直言。
新人喜欢 12 年的经验？请不要把它私人化。
不，不，根本不是为了让它成为个人。这个问题的性质在我看来就像你是 js 的新手，这并没有错。这种类型的问题对于刚刚学习如何做事的人来说很常见，如果我误解了，我很抱歉。了解 DOM 生命周期、js 加载和流程通常是您进入 js 时首先要学习的内容之一，所以我想您应该可以理解我的困惑。
我没有问这个问题，我评论了你的答案。