gpt4 book ai didi

javascript - jQuery如何接受文本框的输入并以数组格式显示?

转载 作者:行者123 更新时间:2023-11-29 18:56:26 25 4
gpt4 key购买 nike

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

问题是我使用 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>

最佳答案

您可以使用此代码了解它的工作原理。您还可以在将值插入数组之前检查非空值,因为数组中的空值没有任何意义。

$(document).ready(function(){
var valueArray = [];
//add value in array
$('#button1').click(function(){
var textValue = $('#text1').val();
//push non empty value only
if(textValue.trim() !== ''){
valueArray.push(textValue);
//reset the text value
$('#text1').val('');
}
});

//display value
$('#button2').click(function(){
$('#Result').html(valueArray.toString());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

关于javascript - jQuery如何接受文本框的输入并以数组格式显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49292796/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com