Question

我正在尝试将输出变为用户输入到输入字段的内容，但是当我按下提交时它会显示“未定义”。为什么会这样，我该如何修复它，谢谢

function myFunction() {
  document.getElementById("output").innerHTML = document.getElementById("input").value;
}

<form id="input" action="/action_page.php">
  input: <input type="text" name="input"><br><br>
  <input type="button" onclick="myFunction()" value="Submit">
</form>

<p id="output"></p>

我知道了，我有两件具有相同身份的东西

Answer 1

您正在尝试根据javascript代码获取其id输入的元素的值：

document.getElementById("input").value

现在表单有此ID，因此它会为您提供 undefined 。将另一个ID分配给input type="text"并在document.getElementById("input").value中使用，您的代码将正常运行

Answer 2

您需要在输入字段中添加id而不是表单。或者您需要为输入字段创建一个新ID。

function myFunction() {
  document.getElementById("output").innerHTML = document.getElementById("input").value;
}

<form action="/action_page.php">
  input: <input type="text" name="input" id="input"><br><br>
  <input type="button" onclick="myFunction()" value="Submit">
</form>

<p id="output"></p>

你也可以像这样使用选择器#input > [type=text]：

function myFunction() {
  document.getElementById("output").innerHTML = document.querySelector("#input > [type=text]").value;
}

<form id="input" action="/action_page.php">
  input: <input type="text" name="input"><br><br>
  <input type="button" onclick="myFunction()" value="Submit">
</form>

<p id="output"></p>

从javascript中的字段中提取值

2 个答案: