javascript - document.getElementById ("#").innerHTML = "Hello "+ 用户 + "!";不工作

Question

我有一个 javascript 函数如下:

function userNameEntered() {
var user = document.forms["user"] ["name"].value;
document.getElementById("Name").innerHTML = "Hello " + text + "!";
}

它访问这个 <form> :

<form method="get" name="user" onsubmit="userNameEntered()">
<p>Name:</p>
<input type="text" name="name" autocomplete="off" id="username">
<input type="submit" onclick="userNameEntered()" value="Submit" id="usersubmit">
</form>

当我尝试它时，我看到文本工具不到一秒钟就消失了。有任何想法吗？我想这可能是因为 user不在全局范围内，所以我尝试在函数之前声明它，但它根本没有显示。我有点困惑，因为我看不到任何可能的问题。

Answer 1

通过从 onsubmit 处理程序 (onsubmit="return userNameEntered()") 返回 false 来阻止默认表单操作(提交时重新加载页面)。您还需要从 userNameEntered 函数返回 false。

然后，记得删除多余的 onclick 处理程序(避免使用 onclick 进行表单提交)并在某处添加 id="Name"的元素。

function userNameEntered() {
  var user = document.forms["user"]["name"].value;
  document.getElementById("Name").innerHTML = "Hello " + user + "!";
  return false;
}

<form method="get" name="user" onsubmit="return userNameEntered()">
  <p>Name: <span id="Name"></span></p>
  <input type="text" name="name" autocomplete="off" id="username">
  <input type="submit" value="Submit" id="usersubmit">
</form>

另请注意，您可能需要 "Hello "+ user + "!"; 而不是 text。