javascript - 为什么 for 循环显示未定义的结果？

Question

我有一个由按钮创建的动态文本框。每次它生成一个新的文本框并在我单击显示按钮时添加一些值后，它会显示所有文本框值但未定义。

生成的结果写在下面。

function show() {
  var mynames = document.getElementsByName("mytext[]");
  var input;
  for (var j = 0; j < mynames.length; j++) {
    input += "<p>" + mynames[j].value + "</p>";
  }
  document.write(input);
}

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".container1");
  var add_button = $(".add_form_field");

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
    } else {
      alert('You Reached the limits')
    }
  });

  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

<div class="container1">
  <button class="add_form_field">Add New Field &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span></button>
  
  <div><input type="text" name="mytext[]"></div>
  
  <button onclick="show()">show</button>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

每次我运行此代码时，它都会显示未定义的结果

undefined
ABC

XYZ

aaaaaa

vvvvvv

ccccc

这就是结果。

标签： javascripthtmljquery