Javascript 表单输入检索

Question

为什么在包含文本框和提交按钮的表单中，我可以提醒用户在文本框中输入的内容，但不能打印在页面上吗？我做错了什么？

这是代码

<form name="Serb" action="" method="get">
<input name="Name" type="text" size="15" maxlength="20" />
<input name="Join" type="submit" value="Join" onClick="serb(this.form)" />

<script type="text/javascript">
    function serb(form){
    var x = document.Serb.Name.value;   
    alert(x); \\this alerts
    document.write(x); \\this should print on page
    }
</script>

出于某种原因，警报工作正常，并准确显示用户在按“加入”后在用户名框中键入的内容。但是，它不会打印页面上的信息。这是为什么？

Answer 1

它确实有效。文本框中的值将打印在页面上。

但是：

1. \\ 在 Javascript 中没有任何意义。注释以 // 开头。这很可能是您看不到正在写入的值的原因

2. document.write 用其参数替换 HTML 页面中的任何内容。 （如果在文档加载后调用）。因此，除非您想学习 Javascript，否则这不是一个好主意。

   实际上，即使在学习 Javascript 时使用它也不是一个好主意，除非您想了解 document.write 的工作原理。
   有灵活（且更好）的方法来操作页面内容，从简单的 开始getElementById 到 复杂 DOM操纵

Answer 2

在页面加载/解析后使用 document.write() 不是一个好主意。此时，它将用新内容覆盖页面 HTML。 document.write() 通常在页面加载时使用，以便在页面加载时将特定点的内容插入到页面中。

如果你想将值放入页面上的某个项目中，那么你需要为此使用适当的 DOM 方法，将值放入输入字段中，在 div 上设置innerHTML，等等......

你可以阅读有关文档。写在这里：https://developer.mozilla.org/en/document.write。

以下是从字段中获取值并将其放入页面上的另一个对象中而不使用 document.write() 的示例： http://jsfiddle.net/jfriend00/dU8Sr/。

HTML：

<form name="Serb" action="" method="get">
<input name="Name" type="text" size="15" maxlength="20" />
<input name="Join" type="button" value="Join" onClick="serb(this.form)" />
</form>
<br>
<br>Output: <span id="output"></span>

JavaScript：

function serb(form) {
    var x = document.Serb.Name.value;   
    document.getElementById("output").innerHTML = x;
}