我制作了一个简单的 javascript 价格数组,我想通过 ID 属性在我的网站上使用它。
var taxrate = 1.21
sp([
1.39, // size 1
1.11, // size 2
2.08, // size 3
2.09, // size 4
1.22 // size 5
]);
function sp(price) {
var i;
for (i = 0; i < price.length; i++) {
var id = "sp" + (i + 1);
document.getElementById(id).innerHTML = price[i];
var idtax = "sp" + (i + 1) + "tax";
var subtotal = (price[i] * taxrate)
var total = Math.round(subtotal*100)/100;
document.getElementById(idtax).innerHTML = total;
}
}
<span id="sp1"></span> <!-- size 1 -->
<span id="sp1tax"></span>
<span id="sp2"></span> <!-- size 2 -->
<span id="sp2tax"></span>
<span id="sp5"></span> <!-- size 5 -->
<span id="sp5tax"></span>
问题是我的网页不显示“尺寸 5”的值。我尝试将第三个跨度 ID 更改为“大小 3”,然后获取值。如果我将其改回“尺寸 5”或“尺寸 4”,这些值将不会再次显示。如果我从网页列表顶部的“尺寸 5”开始,则根本不会显示任何值。如何使用任何可能的 ID 序列中的跨度标签在我的网页上显示价格?
最佳答案
您需要检查 DOM 中是否存在具有 id 的 span,然后将innerHTML 应用于它。
var taxrate = 1.21
sp([
1.39, // size 1
1.11, // size 2
2.08, // size 3
2.09, // size 4
1.22 // size 5
]);
function sp(price) {
var i;
for (i = 0; i < price.length; i++) {
var id = "sp" + (i + 1);
let span = document.getElementById(id); // store the element reference in a variable
if(span) { // check if element with id exists in DOM
span.innerHTML = price[i]; // set the html using the variable
var idtax = "sp" + (i + 1) + "tax";
var subtotal = (price[i] * taxrate)
var total = Math.round(subtotal*100)/100;
document.getElementById(idtax).innerHTML = total;
}
}
}
<span id="sp1"></span> <!-- size 1 -->
<span id="sp1tax"></span>
<span id="sp2"></span> <!-- size 2 -->
<span id="sp2tax"></span>
<span id="sp5"></span> <!-- size 5 -->
<span id="sp5tax"></span>
关于Javascript数组id显示顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60790220/