'How can I change the icons of my website using JavaScript?

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 ?

javascripthtml


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tam Dao

Related Questions