Javascript：如何使用循环功能在一个警报框中显示所有用户输入？

5120bee 发表于 Dev

5120蜜蜂

我正在尝试编写一个函数，该函数将为用户在表单中输入的所有数据显示一个警告框。我必须只使用简单的javascript（抱歉，没有jQuery）来做到这一点。我的HTML如下：

 <form method="POST">
   <label class="form">Name: </label><input type="text" name="name" id="name"><br>
   <label class="form">Address: </label><input type="text" name="address" id="address"><br>
   <label class="form">Email: </label><input type="text" name="email" id="email"><br>

   <button id="submit" type="submit" value="submit" onclick="showAlert()">
   Submit
   </button>
 </form>

我的JavaScript：

 function showAlert() {
     var userInputs = document.getElementsByTagName("input");

     for (var i=0; i < userInputs.length; i++) {
        alert(userInputs.value + " ");
        //Basically my idea would be to implement a loop for as many input fields, 
        //run through all of them, then display ONE SINGLE alert box containing all the 
        //data entered by the user.  But I'm having trouble with how to implement the loop.
    }
 }

如何实现循环？

我编写了另一个实现相同效果的函数，但它涉及为每个输入字段编写冗长而乏味的变量列表，我不想这样做，因为它很乱：

 function alternateShowAlert() {
      var name = document.getElementById('name').value;
      var address = document.getElementById('address').value;
      var email = document.getElementById('email'.value;

      alert(name + " " + address + " " + email)

      //This function, although it works fine, will be too long and tedious if I have 
      //more input fields such as age, city, state, country, gender, etc.  I want to put 
      //it in a loop format but how do I do this?
 }

文森特·奥利维特·里埃拉（Vincent Olivert Riera）

function showAlert() {
  var userInputs = document.getElementsByTagName("input");
  var alertBody = "";
  for (var i=0; i < userInputs.length; i++) {
    alertBody += userInputs[i].value + " ";
  }
  alert(alertBody);                                                                                                                                            
}

document.getElementsByTagName()返回一个数组，因此您需要使用它们的下标index来访问该数组的元素userInputs[i]。

或者您可以使用Array.prototype.forEach。请参见下面的示例。

function showAlert() {
  var userInputs = document.getElementsByTagName("input");
  var alertBody = "";
    Array.prototype.forEach.call(userInputs, function(element) {
      alertBody += element.value + " ";
    });
  alert(alertBody);                                                                                                                                            
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。