javascript - 使用数组在 javascript 中获取输入值

Question

我正在使用 HTML 和 javascript 从用户那里获取一些值。我在页面上有一个输入文本和两个按钮。第一个按钮用于将输入文本添加到表单，第二个按钮用于将数据发送到javascript脚本。我的代码类似于以下代码:

function add_input_function() {
  var html = "<input type='text' placeholder='Your text' id='text_input[]'/><br/>";
  $("#container").append(html);
}

function send_function() {
  var inputs = document.getElementById("text_input");
  for (var i = 0; i < inputs; i++) {
    console.log(inputs.value);
  }
}

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<form method="post">
  <div id="container">
    <input class="input" type="text" placeholder="Your text" id="text_input[]" /><br/>
  </div>
  <br/>
  <input onclick="add_input_function()" type="button" id="add" value="Add Input">
  <br/>
  <input onclick="send_function()" type="button" id="add" value="Send">
</form>

我想获取所有值并将它们显示在控制台中并用 - 分隔。你能帮助我吗？(我的 for 循环现在不起作用)

Answer 1

为每个输入添加一些类，然后当您单击发送按钮时，通过类选择器获取所有元素，并迭代元素上的循环以获取值

 <form method="post">
    <div id="container">
        <input class="input info" type="text" placeholder="Your text" /><br/>
    </div>
    <br/>
    <input onclick="add_input_function()" type="button" id="add" value="Add Input">
    <br/>
    <input onclick="send_function()" type="button" id="add" value="Send">
</form>

<script>
    function add_input_function() {
        var html = "<input type='text' class='info' placeholder='Your text' /><br/>";
        $("#container").append(html);
    }

    function send_function() {
        var inputText = [];
        var inputs = document.getElementsByClassName("info");
        for (var i = 0; i < inputs.length; i++) {
            console.log(inputs[i].value);
            inputText.push(inputs[i].value)
        }

        var finalContent = inputText.join(' - ');
        console.log(finalContent);
    }
</script>