I'm working on a website project and I would like to have a page with a big python icon in the right and other langages icon in the bottom (in a little size). When an icon is clicked, it has to replace the python icon. This one can also be replaced if an other icon is clicked, etc... I have a problem with my javascript; there is my 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>Can you help me find the mistake ?
You need to change the imgSlider function to return function like this:
<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>With this change the src only change when user click on the image