Javascript 如何接受文本框中的输入并在jQuery中以数组格式显示？_Javascript_Jquery

Javascript 如何接受文本框中的输入并在jQuery中以数组格式显示？

javascript jquery

Javascript 如何接受文本框中的输入并在jQuery中以数组格式显示？,javascript,jquery,Javascript,Jquery,我已经编写了从文本框中获取输入值并使用add按钮将其添加到数组中的代码，并且在单击display按钮时显示数组的值问题是，我用JavaScript完成了所有这些，现在我想用jQuery完成。我尝试了这个网站上的一个代码片段，但它不起作用。请帮忙 <body> <script src="jquery-3.3.1.js"></script> <input type="text" id="text1"></input> <

我已经编写了从文本框中获取输入值并使用add按钮将其添加到数组中的代码，并且在单击display按钮时显示数组的值

问题是，我用JavaScript完成了所有这些，现在我想用jQuery完成。我尝试了这个网站上的一个代码片段，但它不起作用。请帮忙

<body>
  <script src="jquery-3.3.1.js"></script>

  <input type="text" id="text1"></input>
  <input type="button" id="button1" value="Add" onclick="add_element_to_array();"></input>
  <input type="button" id="button2" value="Display" onclick="display_array();"></input>
  <div id="Result"></div>


  <script>

    var x = 0;
  var sample = [];    // <-- Define sample variable here

      function add_element_to_array(){

        $(document).on('click', '#btnSubmit', function () {
            var test = $("input[name*='i_name']");

            $(test).each(function (i, item) {
                sample.push($(item).val());
            });

            console.log(sample.join(", "));
        });

    }


    function display_array() {
        var e = "<hr/>";
        for (var y = 0; y < sample.length; y++) {
            e += "Element " + y + " = " + sample[y] + "<br/>";
        }
        document.getElementById("Result").innerHTML = e;
    }

  </script>


 </body>


var x=0；
变量样本=[]；// 您可以使用此代码了解它应该如何工作。您还可以在将值推入数组之前检查非空值，因为数组中的空值没有任何意义

$（文档）.ready（函数（）{
var-valueArray=[]；
//数组中的增值
$（'#按钮1'）。单击（函数（）{
var textValue=$（'#text1'）.val（）；
//仅推送非空值
如果（textValue.trim（）！=''）{
推送（textValue）；
//重置文本值
$（'#text1'）.val（''）；
}
});
//显示值
$（'#按钮2'）。单击（函数（）{
$（'#Result'）.html（valueArray.toString（））；
});
});
我添加了jquery脚本，并将以下内容作为建议的html
<input type="text" id="text1"></input>
<input type="button" id="button1" value="Add"></input>
<input type="button" id="button2" value="Display"></input>
<div id="Result"></div>



inptArr必须是全局数组
<script>
var inptArr = [];
$('#button1').on('click',function(){
    if($('#text1').val() != '')
       inptArr.push($('#text1').val()); 
});

$('#button2').on('click',function(){
    var string = '';
    var lastIndex = parseInt(inptArr.length - 1);
    for(var i = 0; i <= lastIndex ; i++)
    {
        if(i == lastIndex)
            string += inptArr[i];
        else    
            string += inptArr[i] + ',';
    }
    $('#Result').append(string);
});
</script>


var-inptar=[]；
$（'#button1'）。在（'click'，function（）上{
如果（$（'#text1'）.val（）！=''）
inptar.push（$（'#text1'）.val（））；
});
$（'#button2'）。在（'click'，function（）上{
var字符串=“”；
var lastIndex=parseInt（inptar.length-1）；
对于（var i=0；i，在代码中，传递给onclick
的函数将click事件绑定到DOM-不要这样做

var-array=array（）；
变量输入=$（“#text1”）；
var结果=$（“#结果”）；
函数将元素添加到数组（）{
var value=input.val（）；
array.push（值）；
日志（“添加：”，值）；
//input.val（“”；//奖金：将文本添加到数组后清除输入
}
函数显示_数组（）{
text（array.toString（））；
}
这是另一种只需稍加修改即可实现目标的方法
您只有一个文本输入元素，因此不需要任何循环
如果从代码开始定义脚本，则需要使用document.ready（）
，因为在开始时没有id为btnSubmit的已定义元素，因此此块必须等待dom元素准备就绪
另外，使用jquery时，不需要在display\u array（）
函数上使用纯javascript代码getElementById
。您可以将其更改为$（“#Result”）.html（e）；


var x=0；
var数组=[]；
$（文档）.ready（函数（）{
$（'btnsupmit'）。在（'click'，函数（）{
array.push（$（“#text1”）.val（））；
});
});
函数显示_数组（）{
var e=“”；
对于（变量y=0；y”；
}
$（“#结果”）.html（e）；
}

删除将元素绑定到事件处理程序的绑定，即$（文档）。在（'click'，'btnSubmit'，函数（）{
从将元素添加到数组（）
方法sample.join（，）的输出没有出现在console.log中。以及如何显示。是否将单击事件绑定到DOM意味着？？这意味着无论何时单击按钮，您都可以定义单击按钮时发生的情况。这有点像一个开始。您可以注意到，我已删除了$（文档）。on（'click'，'#btnSubmit'，函数（）{
来自函数的部分。它们定义了单击#btnSubmit
时发生的情况，以及单击函数时调用函数的情况。