Question

我是javascript的新手，并试图了解如何从表单中收集多个值来收集以创建一个数组，然后将有另一个函数循环通过for循环数组以通过innerHTML显示在无序列表中元素进入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添加到它。因此，不是在你的ul变量中存储“userInformation”DOM元素，而是在那里存储.innerHTML + myArray字符串。

为了使其有效，请将此行更改为

var ul = document.getElementById("userInformation")

然后它应该可以正常工作。

祝你好运Javascript;）

收集表单值以使循环的文字数组使用getElementById（）和innerHTML属性显示值？

1 个答案: