Estoy trabajando en un proyecto de sitio web y me gustaría tener una página con un ícono grande de python a la derecha y un ícono de otros idiomas en la parte inferior (en un tamaño pequeño). Cuando se hace clic en un icono, tiene que reemplazar el icono de python. Este también se puede reemplazar si se hace clic en otro ícono, etc. Tengo un problema con mi javascript; ahí está mi HTML:
<section> <div class="content"> <div class="imgBox"> <img src="../images/python.png" class="python"> </div> </div> <ul class="thumb"> <li><img class="thumb_image" src="../images/dart.png" onclick="imgSlider('dart.png')"></li> <li><img class="thumb_image" src="../images/flutter.jpg" onclick="imgSlider('flutter.jpg')"></li> <li><img class="thumb_image" src="../images/html.png" onclick="imgSlider('html.png')"></li> <li><img class="thumb_image" src="../images/css.png" onclick="imgSlider('css.png')"></li> <li><img class="thumb_image" src="../images/js.png" onclick="imgSlider('js.png')"></li> <li><img class="thumb_image" src="../images/java.png" onclick="imgSlider('java.png')"></li> </ul> </section> <script type="text/javascript"> function imgSlider(anything){ document.querySelector('.python').src = anything; } </script>¿Puedes ayudarme a encontrar el error?
Debe cambiar la función imgSlider para devolver una función como esta:
<section> <div class="content"> <div class="imgBox"> <img src="../images/python.png" class="python"> </div> </div> <ul class="thumb"> <li><img class="thumb_image" src="../images/dart.png" onclick="imgSlider('dart.png')"></li> <li><img class="thumb_image" src="../images/flutter.jpg" onclick="imgSlider('flutter.jpg')"></li> <li><img class="thumb_image" src="../images/html.png" onclick="imgSlider('html.png')"></li> <li><img class="thumb_image" src="../images/css.png" onclick="imgSlider('css.png')"></li> <li><img class="thumb_image" src="../images/js.png" onclick="imgSlider('js.png')"></li> <li><img class="thumb_image" src="../images/java.png" onclick="imgSlider('java.png')"></li> </ul> </section> <script type="text/javascript"> function imgSlider(anything) { return function() { document.querySelector('.python').setAttribute('src', '../images/' + anything); } } </script> Con este cambio, el src solo cambia cuando el usuario hace clic en la imagen