如何解决为什么在HTML类元素的for循环中，变量i，j，k显示未定义？
请参阅我的for循环多级代码，以及为什么j，k的变量未定义。但是只有我工作。 我将产品的变化分为三个层次。
第一个循环变量是i，它起作用。第二个循环变量是j，不起作用。第三个循环变量是k，不知道它是否有效。
//starts code for product variable
if (document.getElementById('variants')) {
let variants = JSON.parse(document.getElementById('variants').innerHTML);
let variableForm = document.getElementById('variable-form');
let baseName = document.getElementById('base-name');
let price = document.querySelector('span#price');
let stock = document.querySelector('span#stock');
let SKU = document.getElementById('sku');
let quantity = document.getElementById('quantity');
let baseVariants = variants.filter(variant => variant.base === "");
baseVariants.forEach(variant => {
baseName.innerHTML = variant.name + ": ";
variableForm.innerHTML += `<input class="base-radio" style="width: 40px; display: inline;" type="radio" name="baseVariableName" value="${variant.value}"><label style="width: 40px; display: inline;">${variant.value}</label>`;
});
let baseRadioClass = document.getElementsByClassName('base-radio');
for(let i = 0; i < baseRadioClass.length; i++){
baseRadioClass[i].addEventListener('click',changeContent);
function changeContent() {
price.innerHTML = baseVariants[i].price;
stock.innerHTML = baseVariants[i].stock;
sku.value = baseVariants[i].SKU;
quantity.max = baseVariants[i].stock;
let secondLevel = variants.filter(variant => variant.base === baseVariants[i].SKU);
if (secondLevel.length === 0) {
document.getElementById('secondLevel-form').style.display = 'none';
document.getElementById('thirdLevel-form').style.display = 'none';
}
if(secondLevel.length > 0){
document.getElementById('secondLevel-form').style.display = 'block';
document.getElementsByName('secondVariableName').forEach(sec => sec.checked = false)
}
}
//second level
let secondLevel = variants.filter(variant => variant.base === baseVariants[i].SKU);
let secondLevelForm = document.getElementById('secondLevel-form');
let secondLevelName = document.getElementById('secondLevel-name');
secondLevel.forEach(variant => {
secondLevelName.innerHTML = variant.name + ": ";
secondLevelForm.innerHTML += `<input class="second-radio" style="width: 40px; display: inline;" type="radio" name="secondVariableName" value="${variant.value}"><label style="width: 40px; display: inline;">${variant.value}</label>`;
});
let secondRadioClass = document.getElementsByClassName('second-radio');
for (let j = 0; j < secondRadioClass.length; j++) {
secondRadioClass[j].addEventListener('click',changeContent());
function changeContent() {
price.innerHTML = secondLevel[j].price;
stock.innerHTML = secondLevel[j].stock;
sku.value = secondLevel[j].SKU;
quantity.max = secondLevel[j].stock;
let thirdLevel = secondLevel.filter(variant => variant.base === secondLevel[j].SKU);
console.log(thirdLevel);
if (thirdLevel.length === 0) {
document.getElementById('thirdLevel-form').style.display = 'none';
}
if (thirdLevel.length > 0) {
document.getElementById('thirdLevel-form').style.display = 'block';
document.getElementsByName('thirdVariableName').forEach(sec => sec.checked = false)
}
}
//third level
let thirdLevel = secondLevel.filter(variant => variant.base === secondLevel[j].SKU);
let thirdLevelForm = document.getElementById('thirdLevel-form');
let thirdLevelName = document.getElementById('thirdLevel-name');
thirdLevel.forEach(variant =>{
thirdLevelName.innerHTML = variant.name + ": ";
thirdLevelForm.innerHTML += `<input class="third-radio" style="width: 40px; display: inline;" type="radio" name="thirdVariableName" value="${variant.value}"><label style="width: 40px; display: inline;">${variant.value}</label>`;
})
let thirdRadioClass = document.getElementsByClassName('third-radio');
for (let k = 0; k < thirdRadioClass.length; k++) {
thirdRadioClass[k].addEventListener('click',changeContent);
function changeContent() {
price.innerHTML = thirdLevel[k].price;
stock.innerHTML = thirdLevel[k].stock;
sku.value = thirdLevel[k].SKU;
quantity.max = thirdLevel[k].stock;
}
}
}
}
HTML代码可能很好。我想我缺少一些我不知道的有关for循环的要点。 HTML ejs代码
<!-- variable codes -->
<% if(product.variants.length >= 0){ %>
<div id="variants" style="display: none;">
<%= JSON.stringify(product.variants) %>
</div>
<% } %>
<div id="variable-form">
<label id="base-name" style="font-weight: bold;">
</label>
</div>
<div id="secondLevel-form">
<label id="secondLevel-name" style="font-weight: bold;"></label>
</div>
<div id="thirdLevel-form">
<label id="thirdLevel-name" style="font-weight: bold;"></label>
</div>
<p>Price: <span id="price"><%= product.price %></span></p>
<p>Stock Left:<span id="stock"><%= product.stock %></span></p>
<form action="/add-to-cart" method="POST" enctype="multipart/form-data">
<label style="display: inline;">Quantity: </label> <input id="quantity" name="quantity" type="number"
style="width: 40px; display: inline;" max="<%= product.stock %>" min="1" required>
<input type="hidden" id="product-id" name="product" value="<%= product.id%>">
<input type="hidden" id="sku" name="SKU" value="<%= product.SKU %>">
<br><br><label>Upload a design of your choice</label><input style="width: 150px;" type="file" id="imageCover" name="imageCover">
<input type="submit" id="add-cart" class="add-cart" value="Add to cart">
<a id="message-info" href="/cart">Added to cart. Visit cart</a>
</form>
此代码会在运行时将单选按钮添加到html代码中。
解决方法
从您的代码中删除changeContent（）行（我已为您注释了它们）。如果您真的想使用一个函数，请在那些foreach（）之外声明它，并使其接受输入参数。
var baseVariants = [750,280]
function changeContent(index){
console.log(baseVariants[index].stock);
}
for (let i = 0; i < baseVariants.length ; i++){
changeContent(i);
}
这是您的代码已更正。
//starts code for product variable
if (document.getElementById('variants')) {
let variants = JSON.parse(document.getElementById('variants').innerHTML);
let variableForm = document.getElementById('variable-form');
let baseName = document.getElementById('base-name');
let price = document.querySelector('span#price');
let stock = document.querySelector('span#stock');
let SKU = document.getElementById('sku');
let quantity = document.getElementById('quantity');
let baseVariants = variants.filter(variant => variant.base === "");
baseVariants.forEach(variant => {
baseName.innerHTML = variant.name + ": ";
variableForm.innerHTML += `<input class="base-radio" style="width: 40px; display: inline;" type="radio" name="baseVariableName" value="${variant.value}"><label style="width: 40px; display: inline;">${variant.value}</label>`;
});
let baseRadioClass = document.getElementsByClassName('base-radio');
for(let i = 0; i < baseRadioClass.length; i++){
baseRadioClass[i].addEventListener('click',changeContent);
// There is no good reason for this function to exist in your code....
//function changeContent() {
price.innerHTML = baseVariants[i].price;
stock.innerHTML = baseVariants[i].stock;
sku.value = baseVariants[i].SKU;
quantity.max = baseVariants[i].stock;
let secondLevel = variants.filter(variant => variant.base === baseVariants[i].SKU);
if (secondLevel.length === 0) {
document.getElementById('secondLevel-form').style.display = 'none';
document.getElementById('thirdLevel-form').style.display = 'none';
}
if(secondLevel.length > 0){
document.getElementById('secondLevel-form').style.display = 'block';
document.getElementsByName('secondVariableName').forEach(sec => sec.checked = false)
}
//}
//second level
let secondLevel = variants.filter(variant => variant.base === baseVariants[i].SKU);
let secondLevelForm = document.getElementById('secondLevel-form');
let secondLevelName = document.getElementById('secondLevel-name');
secondLevel.forEach(variant => {
secondLevelName.innerHTML = variant.name + ": ";
secondLevelForm.innerHTML += `<input class="second-radio" style="width: 40px; display: inline;" type="radio" name="secondVariableName" value="${variant.value}"><label style="width: 40px; display: inline;">${variant.value}</label>`;
});
let secondRadioClass = document.getElementsByClassName('second-radio');
for (let j = 0; j < secondRadioClass.length; j++) {
secondRadioClass[j].addEventListener('click',changeContent());
// There is no good reason for this function to exist in your code....
// You also overload it many times
//function changeContent() {
price.innerHTML = secondLevel[j].price;
stock.innerHTML = secondLevel[j].stock;
sku.value = secondLevel[j].SKU;
quantity.max = secondLevel[j].stock;
let thirdLevel = secondLevel.filter(variant => variant.base === secondLevel[j].SKU);
console.log(thirdLevel);
if (thirdLevel.length === 0) {
document.getElementById('thirdLevel-form').style.display = 'none';
}
if (thirdLevel.length > 0) {
document.getElementById('thirdLevel-form').style.display = 'block';
document.getElementsByName('thirdVariableName').forEach(sec => sec.checked = false)
}
//}
//third level
let thirdLevel = secondLevel.filter(variant => variant.base === secondLevel[j].SKU);
let thirdLevelForm = document.getElementById('thirdLevel-form');
let thirdLevelName = document.getElementById('thirdLevel-name');
thirdLevel.forEach(variant =>{
thirdLevelName.innerHTML = variant.name + ": ";
thirdLevelForm.innerHTML += `<input class="third-radio" style="width: 40px; display: inline;" type="radio" name="thirdVariableName" value="${variant.value}"><label style="width: 40px; display: inline;">${variant.value}</label>`;
})
let thirdRadioClass = document.getElementsByClassName('third-radio');
for (let k = 0; k < thirdRadioClass.length; k++) {
thirdRadioClass[k].addEventListener('click',changeContent);
// There is no good reason for this function to exist in your code....
//function changeContent() {
price.innerHTML = thirdLevel[k].price;
stock.innerHTML = thirdLevel[k].stock;
sku.value = thirdLevel[k].SKU;
quantity.max = thirdLevel[k].stock;
//}
}
}
}
}
所以，我修复了它。回答我自己的问题。解决问题的方法只是几个简单的if语句。我只需要查看第二级和第三级的数量是否大于零。而且有效。
然后是第三级的另一个错误，我正在按二级过滤二级，而不是按二级过滤变体。
正确的代码...
if (document.getElementById('variants')) {
let variants = JSON.parse(document.getElementById('variants').innerHTML);
let variableForm = document.getElementById('variable-form');
let baseName = document.getElementById('base-name');
let price = document.querySelector('span#price');
let stock = document.querySelector('span#stock');
let SKU = document.getElementById('sku');
let quantity = document.getElementById('quantity');
let baseVariants = variants.filter((variant) => variant.base === '');
baseVariants.forEach((variant) => {
baseName.innerHTML = variant.name + ': ';
variableForm.innerHTML += `<input class="base-radio" style="width: 40px; display: inline;" type="radio" name="baseVariableName" value="${variant.value}" required="true"><label style="width: 40px; display: inline;">${variant.value}</label>`;
});
let baseRadioClass = document.getElementsByClassName('base-radio');
for (let i = 0; i < baseRadioClass.length; i++) {
baseRadioClass[i].addEventListener('click',changeContent);
function changeContent() {
price.innerHTML = baseVariants[i].price;
stock.innerHTML = baseVariants[i].stock;
sku.value = baseVariants[i].SKU;
quantity.max = baseVariants[i].stock;
let secondLevel = variants.filter(
(variant) => variant.base === baseVariants[i].SKU
);
if (secondLevel.length === 0) {
document.getElementById('secondLevel-form').style.display = 'none';
document.getElementById('thirdLevel-form').style.display = 'none';
}
if (secondLevel.length > 0) {
document.getElementById('secondLevel-form').style.display = 'block';
document
.getElementsByName('secondVariableName')
.forEach((sec) => (sec.checked = false));
}
}
}
//second level
for (let i = 0; i < baseRadioClass.length; i++) {
let secondLevel = variants.filter(
(variant) => variant.base === baseVariants[i].SKU
);
if (secondLevel.length > 0) {
let secondLevelForm = document.getElementById('secondLevel-form');
let secondLevelName = document.getElementById('secondLevel-name');
secondLevel.forEach((variant) => {
secondLevelName.innerHTML = variant.name + ': ';
secondLevelForm.innerHTML += `<input class="second-radio" style="width: 40px; display: inline;" type="radio" name="secondVariableName" value="${variant.value}" required="true"><label style="width: 40px; display: inline;">${variant.value}</label>`;
});
let secondRadioClass = document.getElementsByClassName('second-radio');
for (let j = 0; j < secondRadioClass.length; j++) {
secondRadioClass[j].addEventListener('click',changeSecContent);
function changeSecContent() {
price.innerHTML = secondLevel[j].price;
stock.innerHTML = secondLevel[j].stock;
sku.value = secondLevel[j].SKU;
quantity.max = secondLevel[j].stock;
let thirdLevel = variants.filter(
(variant) => variant.base === secondLevel[j].SKU
);
if (thirdLevel.length === 0) {
document.getElementById('thirdLevel-form').style.display = 'none';
}
if (thirdLevel.length > 0) {
document.getElementById('thirdLevel-form').style.display =
'block';
document
.getElementsByName('thirdVariableName')
.forEach((sec) => (sec.checked = false));
}
}
}
}
}
//third level
for (let i = 0; i < baseRadioClass.length; i++) {
let secondLevel = variants.filter(
(variant) => variant.base === baseVariants[i].SKU
);
if (secondLevel.length > 0) {
let secondRadioClass = document.getElementsByClassName('second-radio');
for (let j = 0; j < secondRadioClass.length; j++) {
let thirdLevel = variants.filter(
(variant) => variant.base === secondLevel[j].SKU
);
if (thirdLevel.length > 0) {
let thirdLevelForm = document.getElementById('thirdLevel-form');
let thirdLevelName = document.getElementById('thirdLevel-name');
thirdLevel.forEach((variant) => {
thirdLevelName.innerHTML = variant.name + ': ';
thirdLevelForm.innerHTML += `<input class="third-radio" style="width: 40px; display: inline;" type="radio" name="thirdVariableName" value="${variant.value}" required><label style="width: 40px; display: inline;">${variant.value}</label>`;
});
let thirdRadioClass = document.getElementsByClassName(
'third-radio'
);
for (let k = 0; k < thirdRadioClass.length; k++) {
thirdRadioClass[k].addEventListener('click',changeThirdContent);
function changeThirdContent() {
price.innerHTML = thirdLevel[k].price;
stock.innerHTML = thirdLevel[k].stock;
sku.value = thirdLevel[k].SKU;
quantity.max = thirdLevel[k].stock;
}
}
}
}
}
}
}
如果有人可以用更好的版本来重构此代码，我会很乐意的。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。