如何在Javascript中将节点列表值合并为一个数组？
如何在Javascript中将节点列表值合并为一个数组？
提问于 2019-05-23 19:12:06
在将节点值列表合并到一个数组中时，我遇到了一个问题。我希望有一个值数组，并在单击按钮时更新它。
我使用了forEach方法，然后在嵌套了Array.from()方法的地方使用了function。我得到了几个数组，其数量取决于我有多少个节点。
html代码：
<li>
<button class="add">+</button>
<span class="amount" id = "amount0">0</span>
<button class="substract">-</button>
</li>
<li>
<button class="add">+</button>
<span class="amount" id = "amount1">0</span>
<button class="substract">-</button>
</li>以此类推。
JS代码：
function addAmount(el) {
let amountElement, adjustAmount;
if (el.classList.contains("add")) {
adjustAmount = 1;
amountElement = el.nextElementSibling;
} else {
adjustAmount = -1;
amountElement = el.previousElementSibling;
}
if (amountElement.innerText >= 0) {
amountElement.innerText =
parseInt(amountElement.innerText) + adjustAmount;
} else {
amountElement.innerText = 0;
}
}
function ordered() {
const amount = document.querySelectorAll(".amount");
amount.forEach(function(order) {
let myArrays = Array.from(order.innerText);
console.table(newArrays);
console.log(order);
});
}
document.addEventListener("click", ordered);
document.addEventListener('click', e => {
if (e.target.tagName == "BUTTON") {
addAmount(e.target);
} else {
console.log(e.target.tagName);
}
});此代码在控制台中返回两个节点
<span class="amount" id = "amount">0</span>和两个数组：
["0"]哪个更新了。但是，如果number of value大于10，则数组开始将十进制数和单位数分成数组中的两个项目，例如：
["1","0"]但我想要一件"10“。节点的值正在正确更新。
function addAmount(el) {
let amountElement, adjustAmount;
if (el.classList.contains("add")) {
adjustAmount = 1;
amountElement = el.nextElementSibling;
} else {
adjustAmount = -1;
amountElement = el.previousElementSibling;
}
if (amountElement.innerText >= 0) {
amountElement.innerText =
parseInt(amountElement.innerText) + adjustAmount;
} else {
amountElement.innerText = 0;
}
}
function ordered() {
const amount = document.querySelectorAll(".amount");
amount.forEach(function(order) {
let myArray = Array.from(order.innerText);
console.log(myArray);
console.log(order);
});
}
document.addEventListener("click", ordered);
document.addEventListener('click', e => {
if (e.target.tagName == "BUTTON") {
addAmount(e.target);
} else {
console.log(e.target.tagName);
}
});<li>
<button class="add">+</button>
<span class="amount" id = "amount0">0</span>
<button class="substract">-</button>
</li>
<li>
<button class="add">+</button>
<span class="amount" id = "amount0">0</span>
<button class="substract">-</button>
</li>
Stack Overflow用户
发布于 2019-05-23 19:24:15
只需将数组中的值推入并连接它们即可。试着这样做
function addAmount(el) {
let amountElement, adjustAmount;
if (el.classList.contains("add")) {
adjustAmount = 1;
amountElement = el.nextElementSibling;
} else {
adjustAmount = -1;
amountElement = el.previousElementSibling;
}
if (amountElement.innerText >= 0) {
amountElement.innerText =
parseInt(amountElement.innerText) + adjustAmount;
} else {
amountElement.innerText = 0;
}
}
function ordered() {
const amount = document.querySelectorAll(".amount");
var unit = [];
amount.forEach(function(order) {
let myArrays = Array.from(order.innerText);
unit.push(myArrays);
console.log(order);
});
console.log(unit.join(''));
}
document.addEventListener('click', e => {
if (e.target.tagName == "BUTTON") {
addAmount(e.target);
} else {
console.log(e.target.tagName);
}
});
document.addEventListener("click", ordered);<li>
<button class="add">+</button>
<span class="amount" id = "amount0">0</span>
<button class="substract">-</button>
</li>
<li>
<button class="add">+</button>
<span class="amount" id = "amount1">0</span>
<button class="substract">-</button>
</li>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56273965
复制相关文章
相似问题
腾讯云开发者
