是否可以重复使用相同的文本框来获取 HTML & Javascript 中用户的输入？

Question

所以我使用 html 代码和 "confirm"

的按钮创建了一个文本框

<input type="text" id="myInput" style="height: 10px; width: 50px" value="">

<button onclick="enter_value()">Confirm</button>

我打算做的是，随着网站引导用户做不同的任务（所有功能都是用js写的），一遍又一遍地使用同一个文本框来输入不同的内容

我正在尝试找到一种方法来为用户必须插入的所有输入使用相同的文本框，但到目前为止没有任何效果。

我尝试创建一个函数，例如：

function enter_value(){
  var name = document.getElementById("myInput").value;
}

这应该可以将输入的值存储在变量名中。问题是，我想在按下按钮时执行此操作，但按钮没有响应并且变量 "name" 始终 returns "Enter Your Input Here" （这是默认值吗？）

我在这里错过了什么？

Answer 1

您完全可以重复使用同一个文本框来接收不止一条信息。问题是您如何在流程中存储信息。因此，您可以保留已有的 onclick 处理程序，然后根据页面状态更改您对输入所做的操作。

Current Step: <div id="current_step">name</div>

<input type="text" id="myInput" style="height: 10px; width: 50px" value="">
<button onclick="enter_value()">Confirm</button>

<div class="results">
  <div id="name_result"></div>
  <div id="addr_result"></div>
</div>
function enter_value(){
  var curStep = document.getElementById("current_step").innerHTML,
      curValue = document.getElementById("myInput").value;
  //do some error testing here, if it is a bad submission dont continue
  if (curValue == "") return false;
  if (curStep == "name"){
    document.getElementById("name_result").innerHTML = curValue
    document.getElementById("current_step").innerHTML = "address"
  }
  else if (curStep == "address"){
    document.getElementById("addr_result").innerHTML = curValue
    document.getElementById("current_step").innerHTML = "Done!"
  }
  document.getElementById("myInput").value = '';
}

您应该能够使用它开始

是否可以重复使用相同的文本框来获取 HTML & Javascript 中用户的输入？

Is it possible to repeatedly use the same text box to get input from users in HTML & Javascript?

html

javascript

textbox

input