在HTML页面中嵌入javascript部分的位置

where to embed javascript section in a html page

本文关键字：javascript 位置 HTML      更新时间：2023-09-26

的事情是我无法找出在哪里嵌入javascript在HTML页面是否在头部部分或正文部分。

示例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>

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

例子: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部分，它工作正常。第一个示例演示了当输入数据时单击按钮时，日期将显示在第二个示例中的文本框中，如果我们从框中取出，则将框中的字母转换为大写。

为了使其更具可读性，我倾向于始终将JavaScript放在标题部分。如果您需要从那里访问元素，请使用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>

这就可以了。

你的第二个例子工作，因为你只是定义了一个函数，你没有尝试访问任何元素。

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

你遇到的问题是，你试图引用一个元素之前，它被加载到DOM。

当您将脚本放在HEAD标记中时，dom还没有加载，文档还没有加载。getElementById不会找到你要找的。

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

也许一个更好的选择是看看学习/使用jquery或其他js实用程序。Jquery通过提供一个"ready"事件很容易解决这个问题。这个ready事件将在DOM完全加载时触发。所以:
$(document).ready(
  function()
  {
     $("#demo").html((new Date()).toString());
  });

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

相关文章：