JQuery追加的p元素无法通过原生JS修改innerHTML问题求解

问题原因 #

• document.getElementsByClassName() 返回的是HTMLCollection类数组对象，不是单个DOM元素，直接给整个集合设置innerHTML不会生效，需要遍历集合操作对应下标的元素。
• parseJson方法的else分支中，前面的for循环执行结束后，全局变量i的值已经等于coinlist.length（也就是7），此时直接用i作为下标取值会发生索引越界，拿到的是undefined，自然不会有内容更新。
• 你在页面初始化阶段就获取了coinNamesAndPrices，此时还没有执行首次追加元素的逻辑，虽然HTMLCollection是动态更新的，但后续操作时要确保下标和元素一一对应。

修复方案 #

直接修改parseJson里的else分支逻辑，遍历每个价格数据，对应更新对应下标的p元素即可，同时把循环内的i改为let声明避免全局变量污染：

function parseJson(json){
    var coinIds = [];
    var coinPrices = [];
    // 循环变量改为let声明，避免全局污染
    for (let i=0; i<coinlist.length; i++){
        coinIds.push(String(json[i]["id"]));
        coinPrices.push(String(json[i]["price"]));
    }

    var coinPricesInt = coinPrices.map(Number);
    var coinPricesRounded2Decimals = coinPricesInt.map(function roundPrices2Decimals(price){
        return price.toFixed(2);
    })

    if (amountofCalls == 0){
        addPriceDataHTML(coinPricesRounded2Decimals, coinIds);
    }
    else {
        console.log(coinPricesRounded2Decimals);
        // 新增遍历逻辑，逐个更新对应元素
        for (let i=0; i<coinlist.length; i++) {
            coinNamesAndPrices[i].innerHTML = coinIds[i] + ":" + "     " + "$" + coinPricesRounded2Decimals[i];
        }
    }
}

如果偏好使用jQuery的语法更新，也可以替换为$('.pricebardata').eq(i).html(coinIds[i] + ":" + " " + "$" + coinPricesRounded2Decimals[i])，效果完全一致。

内容的提问来源于stack exchange，提问作者learningtocode53