<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>Tal vez hice algo mal aquí, no lo sé. pero cuando hago clic en la imagen pequeña, la imagen grande tiene que cambiar a esa imagen y el fondo va a cambiar al mismo tiempo. Entonces, el código Java no funciona, pero mi editor dice que no tiene ningún error, ¿qué debo hacer?
<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>cuando elimino esta parte del script, nada cambia. qué hice mal
No entendí exactamente tu problema, pero intentaré ayudarte en primer lugar. No recomendaría poner 2 funciones al mismo tiempo como lo hiciste aquí.
<li> <img src="images/thumb1.png" onclick="imgSlider('img1.png');changeCircleColor('#017143')"></li>con respecto a su código javascript, puede combinar ambas funciones en una sola como esta
function changeImageAndCircleColor(anything, color){ document.querySelector('.starbucks').setAttribute('src', anything); const circle = document.querySelector('.circle'); circle.style.background = color; }ur html debería verse así:
<li> <img src="images/thumb1.png" onclick="changeImageAndCircleColor('img1.png', '#017143')"></li> // and so on....Es posible que esto no resuelva su problema, así que aclare su pregunta para saber cómo ayudar, y ¿dónde está su elemento Starbucks y Circle? danos más detalles sobre tu código