Problem while updating images using Javascript

Question

I have 4 headers on my website and two sections. Each section is having 4 images and each image has an id. By default, only the images with the id defaultimg are visible in both sections, the rest of every image is hidden. What I want to do- I want to show only the requested image in both sections. For

Accepted Answer

The problem is that you are using the same id for multiple elements which is not correct. You should use class names instead.Below is a working solution to your problem using for loop and switch cases.Here is what I did-I created a common function ShowImg and pass it a number that we would like to display the image of the number.If we pass number 1 that means all images which have class exp1img should be visible, so these images will come under showCategory, rest of the images will come under hideCategories.Now, I created a function named changeImgStatus to change the image’s status (visible or none).This function will accept the array of images and status to change.So what this code is doing-When we click on the h3 element, it will call the function ShowImg and pass a number to it. Then, the ShowImg function will check the number and using the switch case decides which images to hide and which to show.then finally, it will call another function changeImgStatus, and pass it to the showCategory and hideCategories images to change their status.In that way you don’t need to create multiple functions to show and hide images, only single function can do all of this. const visibility = "block";const novisibility = "none";let defaultImages = document.querySelectorAll('.defaultimg');let exp1Images = document.querySelectorAll('.exp1img');let exp2Images = document.querySelectorAll('.exp2img');let exp3Images = document.querySelectorAll('.exp3img');let exp4Images = document.querySelectorAll('.exp4img');function changeImgStatus(arr, status) { arr.forEach(el => { el.style.display = status; })}function ShowImg(number) { let showCategory; let hideCategories; switch(number) { // If want to display only type 1 images. case 1: showCategory = exp1Images; hideCategories = [defaultImages, exp2Images, exp3Images, exp4Images]; break; // If want to display only type 2 images. case 2: showCategory = exp2Images; hideCategories = [defaultImages, exp1Images, exp3Images, exp4Images]; break; // If want to display only type 3 images. case 3: showCategory = exp3Images; hideCategories = [defaultImages, exp1Images, exp2Images, exp4Images]; break; // If want to display only type 4 images. case 4: showCategory = exp4Images; hideCategories = [defaultImages, exp1Images, exp2Images, exp3Images]; break default: showCategory = defaultImages; hideCategories = [exp1Images, exp2Images, exp3Images, exp4Images]; } // change the status to visible of showCategory images. changeImgStatus(showCategory, visibility); // change the status to non visible of hide category images. hideCategories.forEach(category => { changeImgStatus(category, novisibility) })} Title of the document

Advertisement

Answer