1

このテスト コードを実行すると、ボタンの上に日付が積み重なって表示されます。日付とボタンは一行でお願いします。これは、javascript を使用した最初のテスト コードであることを覚えておいてください。

<html>

<head>
<script type="text/javascript">
<!--
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write("Today's Date" + month + "/" + day + "/" + year)
//-->

</script>
</head>
<body>

<form name=myform>
<input type=button value="add days" onClick="prompt('How many days do you want to add?','5 or 6');">
</form>


</body>
</html>
4

3 に答える 3

2

Jonathan の言うとおりです。document.write は、テストなどに使用しない限り、決して最適なソリューションではありません。

代わりにこれを行うだけです

    <html>

      <head>
        <script type="text/javascript">
          var currentTime = new Date();
          var month = currentTime.getMonth() + 1;
          var day = currentTime.getDate();
          var year = currentTime.getFullYear();
          var dateString = "Today's Date " + month + "/" + day + "/" + year;
          function loadDate(){
            document.getElementById('dateSpan').innerHTML = dateString;
          }
        </script>

      </head>
      <body onload='loadDate()'> 
        <form name=myform>
          <span id='dateSpan'></span><input type=button value="add days" onclick="promptprompt('How many days do you want to add?','5 or 6')"/>
        </form>
      </body>
    </html>
于 2012-05-20T02:13:37.863 に答える
1

使用しないでくださいdocument.write。代わりに、より適切な方法は、ページ上の要素を使用することです。

<form name="myForm">
  <span id="todaysDate"></span>
  <input type="button" />
</form>

この時点で、「todaysDate」の ID を持つ要素に日付の値を割り当てることができます。

<script type="text/javascript">
  // Build your variables and message
  var currentTime = new Date();
  var month = currentTime.getMonth() + 1;
  var day = currentTime.getDate();
  var year = currentTime.getFullYear();
  var msg = document.createTextNode("Date: "+month+"/"+day+"/"+year);

  // When the body has loaded, set our message
  document.body.onload = function(){
      document.getElementById("todaysDate").appendChild(msg);
  };
</script>
于 2012-05-20T02:02:45.890 に答える
0

最初に発生した重複の理由は、日付文字列がボタンの上にあるのではなく、その逆です (ボタンが日付文字列の上にある)。使用する場合でも、document.write() は <body> 内の出力が HTML として意味を持つ正確な場所に配置する必要があります。<head> に配置しても意味がありません。あなたのブラウザはこれに混乱し、やみくもにすぐに実行しようとしますが、レイアウトを更新しません (明らかにまだ初期化されていません)。それ。

これがOLD STYLEのように見えるかもしれません。これは、現在のベスト プラクティスのコーディング標準と一致しないため、 正確にエミュレートする必要はありません。しかし、「実際に」何が起こっているのかをよりよく理解できるかもしれません。これは、「innerHTML」を使用せずにフォームを初期化する方法を示していることに注意してください。また、フォーム フィールドにラベルを付ける方法も示しています。

ここでは「document.write」を使用しないことに同意します。非常に柔軟性がありません (ページがサーバーからフェッチされると常に実行されますが、ユーザーが [戻る] ボタンをクリックするとおそらく実行されず、Javascript プログラムで "フォームのリセット" などの他の目的に使用することはできません)。また、多くの場合、実際にパフォーマンスが低下します。

フォーム上のすべての入力フィールドを整列して「きれい」にすることと、フォーム全体の周りにボックスを描画することの両方が一般的です。そのようなことは簡単にできます。ただし、質問の領域に焦点を当てるために、この例ではそれらを示していません。

以前は、getElementById() をまったく使用せずに、フォームとフォーム内のフィールドに名前を付けて、ブラウザー固有の巨大な配列でそれらにアクセスすることで、これを行うことができました (そして一般的でした)。しかし、getElementById() を使用する方法は非常に単純で、すべてのブラウザーで機能するため、以前の方法については説明しません。

window.onload= の使用 (関数名の後に括弧内の引数リストが続かないことに注意してください) は、もはや正しい方法ではありません。私がこれを使用したのは、それが非常に短くシンプルであり、読者が本当に重要なことに集中できるようにするためです.

<html>
<head>
<title>Example of setting a Form Input field</title>
<script type="text/javascript">
function showDefaultDate() {
        var dateInputField = document.getElementById("dateInputField");
        dateInputField.value = provideToday();
}

function provideToday() {
        var currentTime = new Date();
        var month = currentTime.getMonth() + 1;
        var day = currentTime.getDate();
        var year = currentTime.getFullYear();
        var dateString = month + "/" + day + "/" + year;
        return dateString;
}

function initializeForm() {
        showDefaultDate();
}

window.onload = initializeForm;
</script>
</head>
<body>
<form>
Today's Date:
<input type="text" size=" 25" id="dateInputField">
<input type="button" value="Miscellaneous Button">
<br>
Another Field:
<input type="text" size="30">
<br>
<br>
<input type="submit" value="Click Me When Done" style="margin-left: 20ex;">
</form>
</body>
</html>
于 2012-05-20T03:52:36.533 に答える