Question

问题是我无法弄清楚在html页面中嵌入javascript的位置，无论是在头部还是身体部分。

示例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部分它正常工作。第一个例子说明点击按钮日期将在输入数据的文本框中的第二个例子中显示，如果我们离开了我们将框中的字母转换为大写字母。

Answer 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>

这样可以正常工作。

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

Answer 2

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

Answer 3

您遇到的问题是您在将元素加载到DOM之前尝试引用该元素。

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

您有几种不同的选择可以解决这个问题。您可以将脚本放在页面的末尾，这将适用于您的小例子。

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

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

你真的需要吗？使用这种方法，它在页面上的脚本无关紧要。

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

3 个答案: