Question

我试图让警告框出现，并显示包含预定义文本和用户输入文本的消息。

到目前为止我所拥有的是名字和姓氏的两个输入字段以及一个提交按钮。它当前显示带有预定义文本的警报弹出窗口，但用户输入仅显示为未定义的＆＃39;。你能告诉我哪里可能出错吗？

代码如下：

＆＃13;

<form>
  <p>First name: <input type="text" id="fname" name="firstname" value=""></p>
  <p>Last name: <input type="text" id="lname" name="lastname" value=""></p>
  <p><input type="button" value="Submit" id="namebutton" /></p>
  <script>
    var fname = document.getElementById("fname").value;
    var lname = document.getElementById("lname").value;
    document.getElementById("namebutton").addEventListener("click", function() {
      alert('Hello ' + fname.value);
    })
  </script>
</form>

＆＃13;

Answer 1

您的fname变量已设置为存储fname.value。然后，在alert中，您尝试获取.value，.value返回的字符串没有.value属性（即fname.value.value ）。

一般来说，将变量直接设置为DOM对象的某个属性并不是一个好主意，因为如果您稍后在代码中决定要获取某些属性的值，那么在其他属性中，您必须重新扫描DOM以获取已扫描的相同元素。将变量设置为元素的引用，然后在需要时获取各种属性。这不会导致重新扫描文档以找到元素。

＆＃13;

<form> 
  <p>First name: <input type="text" id="fname" name ="firstname"></p>
  <p>Last name: <input type="text" id="lname" name="lastname"></p>
  <p><input type="button" value="Submit" id="namebutton"></p>
  <script>
    // Just get a reference to the element
    var fname = document.getElementById("fname");
    var lname = document.getElementById("lname");
    document.getElementById("namebutton").addEventListener("click", function () { 
      // Then, use the properties of the (already gotten) elment as you need them:
      alert('Hello ' + fname.value + " " + lname.value);
    })
  </script>
</form>

＆＃13;

备注：

只有在您处于文本字段时才需要HTML value属性希望该文本字段具有默认值。如果没有，您可以省略属性。

毫无疑问，您已经看过并复制了自终止元素语法他人使用的（<tag />）。这是一种可能导致的旧语法如果使用不当而实际上没有任何问题你的代码。浏览器实际上忽略了该斜杠。 Read this 了解该语法是什么以及为什么不应该使用它。

使用Hello +用户输入创建警报框

1 个答案: