替换<；李>；使用javascript函数生成图像

我正在尝试根据函数将此列表中的第三颗星替换为空星。如果用户移动超过10次，则应更换三星。14次移动后，第二颗星也应更换。我尝试了replaceChild节点，但根本无法使其工作。下面是UL列表以及我试图将其与之关联的函数。replaceChild节点是最好的方法吗

<div id="starRating">
  <ul id="stars" class="starlist" style="list-style-type:none">
     <li><img src="/images/filledstar.png" id="star1"> </li>
     <li><img src="/images/filledstar.png" id="star2"> </li>
     <li><img src="/images/filledstar.png" id="star3"> </li>
     <li><img src="/images/emptystar.png" id="star4"> </li>
   </ul>
</div>

function playerRating(moves) { //determines rating based on how many moves the player takes
  var rating = 3;
  if (moves > 10 && moves <= 13) {
    rating = 2;
  } else if (moves >= 14) {
    rating = 1;
  } else {
    rating = 3;
  } return rating;

  document.getElementById("rating").innerHTML = "Rating: "+ rating;
}

函数playerRating（moves）{//根据玩家的移动次数确定等级
var评级=3；
如果（移动>10&&moves=14）{
评级=1；
}否则{
评级=3；
}回报率；
document.getElementById（“评级”）.innerHTML=“评级：”+评级；
}

您没有解释是什么触发了该函数，但它的工作原理如下：

//获取空的和填充的星号引用
var filledStar1=document.getElementById（“filled1”）；
var filledStar2=document.getElementById（“filled2”）；
var filledStar3=document.getElementById（“filled3”）；
var emptyStar=document.getElementById（“空”）；
函数播放错误（移动）{
var评级=3；
如果（移动>10&&moves=14）{
filledStar2.src=emptyStar.src；
filledStar3.src=emptyStar.src；
评级=1；
} 
回报率；
document.getElementById（“评级”）.textContent=“评级：”+评级；
}
//试着一次一个，你会看到评级工作
编校（9）；
编校（11）；
层错（14）
img{宽度：50px；}







应该用什么替换星星？空星在哪里？那么，什么应该触发替换星星的功能呢？应该有3个填充的星星，最后一个填充的星星将被替换为空的星星，就好像他们的星星评级正在下降一样。空星号是最后一个列表项，它被标记为“star4”。是的，但是首先是什么触发函数运行的呢？