数组值在 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 numsArr

function 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++) {&nbsp; &nbsp; lists[i].innerHTML = numsArr[i];&nbsp;}你应该最终得到这样的东西radioBtns[j].addEventListener('click', function(){&nbsp;if(radioBtns[0].checked){&nbsp; &nbsp;changeArr();&nbsp; &nbsp;for (let i = 0; i < lists.length; i++) {&nbsp; &nbsp; lists[i].innerHTML = numsArr[i];&nbsp;&nbsp; &nbsp;}&nbsp; &nbsp;alert(numsArr);&nbsp;}&nbsp;})将代码移动到函数中并调用它会更好。