For my coding practice, I am working on a project where clicking on the images should change the main product displayed along with its color. However, nothing happens when I click on the products. Can anyone point out what I might be doing wrong?
Here is the code snippet that I have:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">What's New</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<div class="content">
<div class="textbox">
<h2>It's not just Coffee<br>It's <span>Starbucks</span></h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<a href="#">Learn More</a>
</div>
<div class="imgBox">
<img src="img/img1.png" class="starbucks"
</div>
</div>
<ul class="thumb">
<li><img src="img/thumb1.png" onclick="imgSlider('img1.png');changeCircleColor('#017143')"></li>
<li><img src="img/thumb2.png" onclick="imgSlider('img2.png');changeCircleColor('#eb7495')"></li>
<li><img src="img/thumb3.png" onclick="imgSlider('img3.png');changeCircleColor('#d752b1')"></li>
</ul>
<ul class="sci">
<li><a href="#"><img src="img/facebook.png"></a></li>
<li><a href="#"><img src="img/twitter.png"></a></li>
<li><a href="#"><img src="img/instagram.png"></a></li>
</ul>
</section>
<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>