如何检索输入中的值？

Question

我正在尝试检索输入中的值，但我不太确定如何执行此操作。

这是我的代码：

<body onload="displayMessage()">
  <h1> JavaScript Arrays</h1>
  <br>
  <form name="hey">
    Enter value:
    <br>
    <input type="" name="firstname" value="">
    <br>
    <button type="button" onclick="displayMessage()">Add to list</button>
  </form>

  <p></p>

  <p id="pie"></p>

  <br>

  <p id="beef"></p>

</body>

Answer 1

您在 "The user entered: " 之后缺少 + 符号，我假设您想将 userInput 而不是 "Arrays" 推入数组。

我还使用了 .insertAdjacentHTML() 这样您就不会覆盖原来的 .innerHTML 设置。我还通过将 pie 元素存储在变量中来缩短代码。

var Arrays = ["Printer", "Tablet", "Router", "Smart phone", "Motherboard", "Hard drive"];
document.getElementById("beef").innerHTML = Arrays;


function displayMessage() {
  var userInput = document.hey.firstname.value; 
  var pie = document.getElementById("pie");

  // ----------------------------------v
  pie.innerHTML = "The user entered: " + userInput + "<br>";

  Arrays.push(userInput); // <------------ push the new item

  // Prevent overwrite--v
  pie.insertAdjacentHTML("beforeend", Arrays);
}

<h1> JavaScript Arrays</h1>
<br>
<form name="hey">
  Enter value:
  <br>
  <input type="" name="firstname" value="">
  <br>
  <button type="button" onclick="displayMessage()">Add to list</button>
</form>

<p></p>

<p id="pie"></p>

<br>

<p id="beef"></p>

其余正确。

此外，变量名最好使用小写字母。这是常用的 JavaScript 约定。

Answer 2

您没有将 userInput 添加到数组，您只是将静态文本 'Arrays' 添加到数组

function displayMessage() {
  var userInput = document.getElementsByName("firstname")[0].value;
  document.getElementById("pie").innerHTML = "The user entered: " + userInput + "<br>";
  Arrays.push( userInput );
  document.getElementById("pie").innerHTML = Arrays.join( "," );
}

而且您还错过了 userInput 之前的串联运算符 +

Answer 3

你需要一个 + 这里 user entered: " + userInput
Arrays.push(userInput);
document.getElementById("beef").innerHTML = Arrays;
userInput && Arrays.push(userInput); 防止空插入

var Arrays = ["Printer", "Tablet", "Router", "Smart phone", "Motherboard", "Hard drive"];
document.getElementById("beef").innerHTML = Arrays;


function displayMessage() {
  var userInput = document.hey.firstname.value;
  userInput && Arrays.push(userInput);
  document.getElementById("pie").innerHTML = ("The user entered: " + userInput + "<br>");
  document.getElementById("beef").innerHTML = Arrays;
}

<body onload="displayMessage()">
  <h1> JavaScript Arrays</h1>
  <form name="hey">
    Enter value: <input type="" name="firstname" value=""> <button type="button" onclick="displayMessage()">Add to list</button>
  </form>
  <p id="pie"></p>
  <p id="beef"></p>

如何检索输入中的值？

How to retrieve the value in the input?

html

javascript

arrays

var