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

Question

我正在尝试编写一个函数，该函数将为用户在表单中输入的所有数据显示一个警报框。 我必须只使用简单的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?
 }

Answer 1

您有逻辑：您需要循环来收集所有信息，但应该只显示一个警报，因此，除了在循环内发出警报外，您还需要在执行以下操作：

function showAlert() {
     var userInputs = document.getElementsByTagName("input");
     var infos = ""; // Create a string for the content
     for (var i=0; i < userInputs.length; i++) {
        infos += userInputs[i].value + " "; // Add the info from user input
    }
    alert(infos); // Show one alert at the end
 }

Answer 2

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()返回一个数组，因此您需要使用它们的索引来访问该数组的元素： 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);                                                                                                                                            
}

Answer 3

马丁正在帮助您实现目标，但是我认为您会为获得价值而奋斗。 Document.getElementsByTagName 返回最好视为数组的HTML集合 。

因此， user inputs.value可能需要类似于userinputs[i].value的代码才能使Martin的代码正常工作

Answer 4

您可以单行完成它，没有任何循环：

 function Show() { alert([].slice.call(document.querySelectorAll("input[type='text']")).map(function(x) { return x.id + ": " + x.value; }).join("\\n")); } 

 Name: <input type="text" id="name" /><br /> Address: <input type="text" id="address" /><br /> Email: <input type="text" id="email" /><br /> <button type="button" onclick="Show();">Show</button> 

所有现代浏览器（IE 9+）都支持querySelectorAll方法，它是与jQuery选择器等效的普通JS。 但是，它返回一个节点列表，该列表应转换为纯数组 ，以便我们使用所需的.map()方法轻松获取所有值。