javascript - Changing the background color with click using queryselector

Question

I tried to change the background color with querySelector but it doesn't work, is there something wrong or is there another more efficient way?

<ul class="thumb">
  <li><img src="images/thumb1.png" onclick="imgSlider('images/img1.png');changeCircleColor('#017143')"></li>
  <li><img src="images/thumb2.png" onclick="imgSlider('images/img2.png');changeCircleColor('#eb7495')"></li>
  <li><img src="images/thumb3.png" onclick="imgSlider('images/img3.png');changeCircleColor('#d752b1')"></li>
</ul>

<script type="text/javascript">
  function imgSlider(anything) {
    document.querySelector('.starbucks').src = anything;
  }
  
  function changeCircleColor(color) {
    const circle = documennt.querySelector('.circle');
    circle.style.background = color;
  }
</script>

.circle{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #017143;
  clip-path: circle(600px at right 800px);
}

question from:https://stackoverflow.com/questions/65874372/changing-the-background-color-with-click-using-queryselector

Answer 1

You made a typo. It's document, not documennt.

<ul class="thumb">
        <li><img src="images/thumb1.png" onclick="imgSlider('images/img1.png');changeCircleColor('#017143')"></li>
        <li><img src="images/thumb2.png" onclick="imgSlider('images/img2.png');changeCircleColor('#eb7495')"></li>
        <li><img src="images/thumb3.png" onclick="imgSlider('images/img3.png');changeCircleColor('#d752b1')"></li>
    </ul>
<script  type="text/javascript">
function imgSlider(anything){
    document.querySelector('.starbucks').src = anything;
}
function changeCircleColor(color){
    const circle = document.querySelector('.circle');
    circle.style.background = color; 
}
</script>