Question

如果您运行此测试代码，您将看到日期堆叠在按钮上。我想在一行上的日期和按钮。请记住这是我的第一个使用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>

Answer 1

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>

Answer 2

Don't use document.write。相反，更合适的方法是在页面上使用元素：

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

此时，您可以将日期值分配给ID为“todaysDate”的元素：

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

Answer 3

您最初遇到重叠的原因并不是日期字符串落在按钮顶部，而是相反（按钮落在日期字符串的顶部）。如果使用的话，document.write（）应该放在＆lt; body＆gt;中。在它的输出作为HTML有意义的确切位置。将它放在＆lt; head＆gt;中没有意义;你的浏览器对此感到困惑，盲目地试图立即执行它但是没有更新布局（显然还没有初始化），所以后来＆lt; body＆gt;中的第一件事就是这样。（恰好是按钮）覆盖它。

这可能就像老式风格一样。这不匹配当前最佳实践编码标准，并且不应该完全模拟。但它可能会让你更好地了解“真正”发生的事情。请注意，这显示了使用“innerHTML”初始化表单的方法。它还说明了标记表单字段的方法。

我同意不应在此使用“document.write”。它过于灵活（总是在从服务器获取页面时执行，但可能在用户单击“后退”按钮时不执行，并且您的Javascript程序无法用于其他目的，例如“重置表单”）。在许多情况下，它确实会降低性能。

将表格上的所有输入字段对齐以使它们“漂亮”并在整个表单周围绘制一个框是很常见的。这样的事情很容易做到;但是为了关注你问题的区域，这个例子确实不来说明它们。

曾经有可能（并且通常）不使用getElementById（），通过命名表单和表单中的字段，并使用某些特定于浏览器的数组mumbo-jumbo访问它们。但是getElementById（）的方式非常简单并适用于所有浏览器，我甚至都不会说明它是如何完成的。

使用window.onload =（注意函数名称不是后跟parens中的参数列表）不再是正确的做事方式。我之所以使用它只是因为它非常简短，让读者可以专注于真正重要的事情。

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

需要我的document.write输出与我点击按钮在同一行？

3 个答案: