gpt4 book ai didi

javascript - 循环遍历文本框,使用 id 作为变量?

转载 作者:行者123 更新时间:2023-11-30 12:23:12 25 4
gpt4 key购买 nike

基本上,我试图用文本框中的一些值填充一个数组。我以为我可以通过递增 id 来做到这一点,但它不起作用。

这里是:

var sections = 0;
var mod = [];
var identifier = 0;

function addSection(){

sections++;

document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'>";
document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'>";
document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'> <br>";
}

function removeSection(){
if (sections > 0){
sections--;
identifier -= 3;
document.getElementById("input").innerHTML = "";

for(i=0; i<sections; i++){
document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'>";
document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'>";
document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'> <br>";
}

}
}

function calculate(){
populateArray();
}

function populateArray(){

var i,j;

for(i=0;i<sections * 3;i++){
var pop = i.toString();
mod[i] = parseInt(document.getElementById(pop).innerHTML.value);
i++;

pop = i.toString();
mod[i] = parseInt(document.getElementById(pop).innerHTML.value);
i++

pop = i.toString();
mod[i] = parseInt(document.getElementById(pop).innerHTML.value);
}
document.getElementById("debug").innerHTML = mod.toString();
}
<!doctype html>
<html>
<head>
<title>To Pass v1.0</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

<h1>TO PASS</h1>

<button onclick="addSection()">Add Section</button>
<button onclick="removeSection()">Remove Section</button>
<div id='input'></div>
<button onclick="calculate()">Calculate</button>
<div id='output'></div>
<div id='debug'></div>
</body>
<script type="text/javascript" src="js/main.js"></script>
</html>

是否可以按照我的方法来做,或者它会不可避免地因为某种原因而不起作用吗?进行一些搜索后,jquery 似乎是可行的方法,但我不确定如何开始使用它。

最佳答案

jQuery 确实简化了事情,但它不能做 JavaScript 不能做的任何事情,而且许多令人惊叹的网站早在 jQuery 出现之前就已建成。


populateArray() 中,在此处删除 innerHTML:

mod[i] = parseInt(document.getElementById(pop).innerHTML.value);

应该是:

mod[i] = parseInt(document.getElementById(pop).value);

你可以像这样简化函数:

function populateArray() {
var i;

for(i = 0 ; i < sections * 3 ; i++) {
mod[i] = parseInt(document.getElementById(i).value);
}
document.getElementById('debug').innerHTML = mod.toString();
}


addSection() 中,这会清除现有 input 元素的值:

document.getElementById("input").innerHTML += "<input type='text' id='" + identifier++ + "'>";

相反,您应该创建新的 input 元素并附加它们。

这里是函数的重写:

var input= document.getElementById('input');

function addSection(){
var inp, i;

sections++;

for(var i = 0 ; i < 3 ; i++) {
inp= document.createElement('input');
inp.type= 'text';
inp.id= identifier++;
input.appendChild(inp);
}
input.appendChild(document.createElement('br'));
} //addSection

removeSection() 中,所有 input 元素的值都被清除。

我没有重写那个函数,而是完全重写了你的程序,没有任何全局变量,也没有为 input 元素分配 ID。

如果您有任何问题,我会更新我的回答并进行解释。

片段

function addSection() {
var input= document.getElementById('input'),
sect= document.querySelector('section');

input.appendChild(sect.cloneNode(true));
}

function removeSection() {
var input= document.getElementById('input'),
sects= document.querySelectorAll('section');

if(sects.length > 1) {
input.removeChild(sects[sects.length-1]);
}
}

function calculate() {
var inp= document.querySelectorAll('section input'),
debug= document.getElementById('debug'),
mod= [],
i,
val;

for(i = 3 ; i < inp.length ; i++) {
val= parseInt(inp[i].value);
mod.push(val || 0);
}
debug.innerHTML = mod.toString();
}
section:first-of-type {
display: none;
}
<button onclick="addSection()">Add Section</button>
<button onclick="removeSection()">Remove Section</button>

<div id='input'>
<section>
<input type="text">
<input type="text">
<input type="text">
</section>
</div>
<button onclick="calculate()">Calculate</button>
<div id='output'></div>
<div id='debug'></div>

关于javascript - 循环遍历文本框,使用 id 作为变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30354451/

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