javascript - 使用 Hello + 用户输入创建一个警告框

Question

我正在尝试让一个警告框出现，其中包含一条包含预定义文本和用户输入文本的消息。

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

代码如下:

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

Answer 1

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

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

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

注意事项:

• HTML value仅当您在文本字段上需要属性时希望该文本字段具有默认值。如果没有，你可以省略属性。
• 毫无疑问，您已经看到并复制了自终止元素语法的 ( <tag />) 被其他人使用。这是一种旧语法，可能会导致如果使用不当会出现问题，实际上对您一无所获你的代码。浏览器实际上忽略了结尾的斜杠。<强> Read this 该语法是什么以及为什么不应该使用它。