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

Question

I have an array of numbers that goes into a DOM-list.

When I modify the array values with some array method, I'm not able to render it in the browser.BUT shows correctly in console.log or alert.

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

You are not updating the DOM as part of the callback.

Move this inside your callback:

for (let i = 0; i < lists.length; i++) {
    lists[i].innerHTML = numsArr[i]; 
}

You should end up with something like this

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);
 } 
})

It would be even better to move that code inside a function and call it.