Image gallery thumbnails

Question

I'm new to Java and need to build an image gallery. I have a catalogue of images: each category has a thumbnail; each category has three images.

Process: Click on thumbnail, bigPic changes its src to show the image you clicked on. Three dots below bigPic can be clicked to see the other images in that category (so if another thumbnail is chosen, the srcs they pass onto bigPic will change too)

I have tried a few things and looked around but I cannot seem to make it work. Here is what I have so far:

    <script>
        function backColor(a) {
            document.getElementById("bigPic").src = a;
        }
        function varE(e){
            var chosen = e;
            document.getElementsByName("firstDot").id = chosen;
        }
        function setM(m) {
            var chosenImage = m.id;
            document.getElementById("bigPic").src = chosenImage;
        }
    </script>

bigPic:

    <img class="bigPic" id="bigPic">

thumbnail image:

    <img class="thumb" src="categoryImageSRC" onclick="backColor('anotherImageSRC'); varE('otherImageSRC')">

dot/circle that shows another image in category:

    <img name="firstDot" id="" src="dotImageSRC" onclick="setM(this)">

Any ideas on how to go about this, examples and corrections are very welcome! Thank you!

Answer 1

get element by name returns an array of element so you need to change this line in varE function

document.getElementsByName("firstDot").id = chosen;

to

document.getElementsByName("firstDot")[0].id = chosen;