1

问题是我无法弄清楚在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 部分中，它工作正常。第一个示例演示了单击按钮时，当输入数据时，日期将显示在第二个示例中的文本框中，如果我们开箱即用，则字母在框中将我们转换为大写。

4

3 回答 3

2

为了让它更具可读性，我更喜欢总是将 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>

这会很好用。

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

于 2013-06-16T09:02:57.383 回答
0

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

于 2013-06-16T09:02:14.987 回答
0

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

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

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

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

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

是你真正需要的。使用这种方法，脚本在页面上的哪个位置并不重要。

于 2013-06-16T09:03:04.220 回答