<ul class="thumb">
<li> <img src="images/thumb1.png" onclick="imgSlider('img1.png');changeCircleColor('#017143')"></li>
<li> <img src="images/thumb2.png" onclick="imgSlider('img2.png');changeCircleColor('#eb7495')"></li>
<li> <img src="images/thumb3.png" onclick="imgSlider('img3.png');changeCircleColor('#017143')"></li>
</ul>
maybe i did something wrong in here i dont know. but when i click on the small image the big image have to change to that image and the backgroud is going to change at the same time. so that java code is not working but my editor says it has no error what should i do.
<ul class="sci">
<li><a href="#"> <img src="images/facebook.png"></a></li>
<li><a href="#"> <img src="images/twitter.png"></a></li>
<li><a href="#"> <img src="images/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>
when i delete this script part nothing changes. what did i do wrong
I didn't understand ur problem exactly but i will try to help u out first of all i wouldn't recommend to put 2 functions at the same time like u did here
<li> <img src="images/thumb1.png" onclick="imgSlider('img1.png');changeCircleColor('#017143')"></li>
regarding your javascript code you can combine ur both functions in a single one like this
function changeImageAndCircleColor(anything, color){
document.querySelector('.starbucks').setAttribute('src', anything);
const circle = document.querySelector('.circle');
circle.style.background = color;
}
ur html should looks like this:
<li> <img src="images/thumb1.png" onclick="changeImageAndCircleColor('img1.png', '#017143')"></li>
// and so on....
this may not solve ur problem, so please make your question more clear to know ho to help, and where's ur starbucks and circle element?? provide us with more details about ur code