1

問題は、head セクションか body セクションのどちらで、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>

上記の例では、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>

2 番目の例では、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>

これは問題なく機能します。

関数を定義しただけで、要素にアクセスしようとしなかったため、2番目の例が機能しました。

于 2013-06-16T09:02:57.383 に答える
0

頭に入れることができます。問題は、あなたの例が同じではないということです。Date()最初のものは、現在の日付が本来あるべきときに を呼び出すことによって取得されるため、機能しませんnew Data().getDate()。2 番目の例は、コードが有効であるため機能します。

于 2013-06-16T09:02:14.987 に答える
0

あなたが直面している問題は、DOM に読み込まれる前に要素を参照しようとしていることです。

スクリプトを HEAD タグに入れると、dom はまだロードされておらず、document.getElementById は探しているものを見つけられません。

これに対処するには、いくつかの異なるオプションがあります。ページの最後にスクリプトを配置できます。これは、ここの小さな例で機能します。

おそらくより良いオプションは、jquery または別の js ユーティリティの学習/使用を検討することです。Jquery では、「準備完了」イベントを提供することで、この問題を簡単に解決できます。この ready イベントは、DOM が完全にロードされるとトリガーされます。そう：

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

本当に必要なのはそれだけです。このアプローチでは、スクリプトがページのどこにあるかは問題ではありません。

于 2013-06-16T09:03:04.220 に答える