为什么在 HTML 类元素的 for 循环中，i、j、k 等变量显示未定义？答案

【问题标题】：Why in a for loop of HTML class elements, the variables like i, j, k shows undefined?为什么在 HTML 类元素的 for 循环中，i、j、k 等变量显示未定义？
【发布时间】：2020-12-13 04:13:51
【问题描述】：

查看我的多级 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() 中使用变量。简短的回答是：将函数 changeContent() 移到每个函数之外。第二件事，让它支持输入参数changeContent(j)。这两件事应该可以解决您的问题。
或者.. 从任何地方删除function changeContent() { + } 它的结尾.... 看起来它没有明确定义的目的，所以这就是它搞砸你的代码的原因。跨度>
代码中有changeContent的三种定义，其中一种是立即调用，返回值分配给一个事件监听器。只需使用匿名函数并将其直接分配给事件侦听器即可。
匿名功能不起作用

标签： javascript arrays for-loop object dom

【解决方案1】：

从您的代码中删除 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;
                //}
            }
            
        }
    }
}

【讨论】：

【解决方案2】：

所以，我修好了。回答我自己的问题。解决它的只是几个简单的 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;
              }
            }
          }
        }
      }
    }
  }

如果有人可以用更好的版本重构这段代码，我会喜欢的。

【讨论】：