数组值在 DOM 中没有变化，但在 console.log 中显示正确

Question

我有一个进入 DOM 列表的数字数组。当我使用某种数组方法修改数组值时，我无法在浏览器中呈现它。但在 console.log 或警报中正确显示。https://jsfiddle.net/0h672ruz/10/<form action="">        <input type="radio" name="radio" id="radioBtn1" class="radio">        <input type="radio" name="radio" id="radioBtn2" class="radio">    </form><ul>    <li></li>    <li></li>    <li></li></ul>let radioBtns = document.querySelectorAll(".radio");let lists = document.querySelectorAll("li");let numsArr = [11, 22, 33];     for (let j = 0; j < radioBtns.length; j++) {    radioBtns[j].addEventListener('click', function(){      if(radioBtns[0].checked){        changeArr();        alert(numsArr);        }   })}//modify numsArrfunction changeArr(){numsArr.splice(0, 1, 44)}for (let i = 0; i < lists.length; i++) {    lists[i].innerHTML = numsArr[i]; }```

Answer 1

作为回调的一部分，您不会更新 DOM。

将此移动到您的回调中：

for (let i = 0; i < lists.length; i++) {

    lists[i].innerHTML = numsArr[i]; 

}

你应该最终得到这样的东西

radioBtns[j].addEventListener('click', function(){

 if(radioBtns[0].checked){

   changeArr();

   for (let i = 0; i < lists.length; i++) {

    lists[i].innerHTML = numsArr[i]; 

   }

   alert(numsArr);

 } 

})

将代码移动到函数中并调用它会更好。