收集表单值以使用 getElementById() 和 innerHTML 属性使文字数组 for 循环显示值？

Question

我完全不熟悉 javascript 并试图了解如何从一个表单中收集多个值以收集以制作一个数组，然后该数组将有另一个函数来循环遍历 for 循环数组以显示在通过将元素 innerHTML-ing 到 dom 中的无序列表。但是，它说 ul.appendChild 不是函数？我不是不知道是什么意思并且已经搜索过。这是我的代码，可以给您一个更好的主意。我不想要答案，是否有人可以指出可能的错误并引导我正确的方向？谢谢！

https://jsfiddle.net/rtomino/eu10htcm/2/

<form name="contact" id="contactForm" action="#">
    <div class="six columns">
      <label for="firstName" class="req">First Name:</label>
      <input class="u-full-width" type="text" name="userInput[]" required>
    </div>
    <div class="six columns">
      <label for="lastName" class="req">Last Name:</label>
      <input class="u-full-width" type="text" name="userInput[]" required>
    </div>
</div>
<div class="row">
  <div class="six columns">
    <label for="email" class="req">Email:</label>
    <input class="u-full-width" type="email" placeholder="test@test.com" name="userInput[]" pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" required>
  </div>
  <div class="six columns">
    <label for="tel">Phone:</label>
    <input class="u-full-width" type="tel" placeholder="(000)-000-0000" name="userInput[]">
  </div>
</div>
<div class="row">
  <div class="six columns">
    <div class="required"><em>* Required</em></div>
  </div>
  <div class="six columns">
    <input type="button" id="submit" value="Submit">
    <p class="clear">Clear fields</p>
  </div>
</div>
</form>

window.onload = init;

function init() {
  var button = document.getElementById("submit");
  button.onclick = handleButtonClick;

}

function handleButtonClick(e) {

  var collectInput = document.getElementsByName("userInput[]");

  if (collectInput == "") {
    alert("Please fill the form");
  } else {

    for (var i = 0; i < collectInput.length; i++) {
      var myArray = collectInput[i].value;

      var li = document.createElement("li");

      li.innerHTML = myArray;

      var ul = document.getElementById("userInformation").innerHTML += myArray;

      ul.appendChild(li);
    }
  }
}

Answer 1

您好，欢迎来到 JavaScript ;)

好吧，让我们看一下您的 javascript 代码

var myArray = collectInput[i].value;

var li = document.createElement("li");

li.innerHTML = myArray;

var ul = document.getElementById("userInformation").innerHTML += myArray;

ul.appendChild(li);

所以首先你获取 collectInput[i] 并将其保存到 myArray 变量。

var myArray = collectInput[i].value;

然后创建 li 元素并将 myArray 设置为其 innerHtml

var li = document.createElement("li");

li.innerHTML = myArray;

这很好。但是你这样做

var ul = document.getElementById("userInformation").innerHTML += myArray;

您想找到 "userInformation" 元素并将其保存到本地 ul 变量，但您取而代之的是获取其 innerHTML 并将 myArray 添加到其中。因此，不是将 "userInformation" DOM 元素存储在 ul 变量中，而是将 .innerHTML + myArray 字符串存储在那里。

因此，要使其正常工作，请将此行更改为

var ul = document.getElementById("userInformation")

然后应该就可以正常工作了。

祝你好运 Javascript ;)

收集表单值以使用 getElementById() 和 innerHTML 属性使文字数组 for 循环显示值？

Collect form values to make literal array for loop to display values using getElementById() and the innerHTML property?

html

javascript

forms

arrays

getelementbyid

收集表单值以使用 getElementById() 和 innerHTML 属性 使文字数组 for 循环显示值？

Collect form values to make literal array for loop to display values using getElementById() and the innerHTML property?

html

javascript

forms

arrays

getelementbyid

收集表单值以使用 getElementById() 和 innerHTML 属性使文字数组 for 循环显示值？