Question

我正在创建一个包含用户输入列表的网站，但在某个阶段我希望用户看到所有输入的摘要页面。如果未选择输入，则不应将其显示为摘要的一部分（如下面的脚本示例中所示）。

这是我的问题：将有多个用户输入并编写一个JS脚本来实现我在下面的示例脚本中所做的将是很多工作和不可行的。有没有办法将个人ID的两个JS脚本组合成一个，如下面的脚本？

 <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>    
        <div>
            <label>For the first test</label>
            <input type="text" placeholder="Enter Number" name="clientinfo" id="test1" required>        
        </div>

        <div>
            <label>For the second test</label>
            <input type="text" placeholder="Enter Number" name="clientinfo" id="test2" required>        
        </div>

        <button id="myBtn">Test</button>

        <div style="color:blue;">
            <p id="result1"></p>
        </div>
        <div style="color:red">
            <p id="result2"></p>
        </div>

        <script>
          function getUserName() {
          var test1 = document.getElementById('test1').value;
          var result1 = document.getElementById('result1');
          if (test1.length > 0) {  
          result1.textContent = 'Test1:  ' + test1;
          } else {
            null;
            }
          }
          var myBtn = document.getElementById('myBtn');
          myBtn.addEventListener('click', getUserName, false);
        </script>

        <script>
          function getUserName() {
          var test2 = document.getElementById('test2').value;
          var result2 = document.getElementById('result2');
          if (test2.length > 0) {  
          result2.textContent = 'Test2: ' + test2;
          } else {
            null;
            }
          }      
          var myBtn = document.getElementById('myBtn');
          myBtn.addEventListener('click', getUserName, false);
        </script>    
    </body>
    </html>

P.S。我还想知道用户是否按下带有输入的测试按钮，移除输入并再次按下测试按钮，第一个输入将被删除？

Answer 1

你可以获取所有输入并循环抛出结果并创建一个包含输入值的dom元素

将添加每个创建的元素，以便说出结果元素

请参阅代码段

＆＃13;

function getUserName() {

  var inputList = document.getElementsByTagName("INPUT");
  var res = document.getElementById("result");
  res.innerHTML = "";
  var indx = 1;
  for (i = 0; i < inputList.length; i++) {
    if (inputList[i].value != "") {
      var ele = document.createElement("p");
      ele.innerHTML ="test " + indx + " : " + inputList[i].value
      res.appendChild(ele);
      indx++;
    }
  }

}
var myBtn = document.getElementById('myBtn');
myBtn.addEventListener('click', getUserName, false);

＆＃13;

<div>
  <label>For the first test</label>
  <input type="text" placeholder="Enter Number" name="clientinfo" id="test1" required>
</div>

<div>
  <label>For the second test</label>
  <input type="text" placeholder="Enter Number" name="clientinfo" id="test2" required>
</div>

<button id="myBtn">Test</button>

<div id="result">

</div>

＆＃13;

编写单个JS脚本，用于将ID分配给HTML

1 个答案: