JS Add event on click on an image-CodePudding

I need to change the opacity of 3 images taged with class kfc , the function is working great in the console , but the onclick event doenst seems to work

HTML :

<div >
    <img id = "macdo" src="https://m.mcdonalds.fr/mcdo-mcdofr-front-theme-mobile/image/mcdo-france-android-app.png" alt="L'image du logo de mc do">
    <img id = "kfc" src="https://e7.pngegg.com/pngimages/743/385/png-clipart-kfc-hamburger-fried-chicken-logo-kfc-cdr-text.png" alt="image logo de kfc">
    <img id = "king" src="https://www.burgerking.fr/logo.jpg" alt="logo de burger king">
</div>
<div id="divGame">
<div >
    <img src="https://media.gqmagazine.fr/photos/6006a7ec5779952c6683660d/16:9/w_2560,c_limit/burger-king-korea-stacker-4-3-2-whopper-launch-001.jpg"
    alt="image de burger king" >
    <img src="https://www.journaldugeek.com/content/uploads/2019/09/mcdonald-fida-lita-12-640x361.jpg"
    alt="image de mc do" >
    <img src="https://static.kfc.fr/images/items/lg/Menu_TowerRaclette.jpg?v=4pNBB3"
    alt="image de kfc" >
</div>
<div >
    <img src="https://img.grouponcdn.com/deal/AMgjseg9WiFSo2jGrU4G4NTv5HD/AM-960x576/v1/t600x362.jpg"
    alt="image de mc do" >
    <img src="https://www.journaldugeek.com/content/uploads/2020/08/rebel.jpg"
    alt="image de burger king" >
    <img src="https://www.foodhiz.com/wp-content/uploads/2020/06/menu-best-of-280-livraison-mcdo-a-domicile-foodhiz.jpg"
    alt="image de mc do" > 
</div>
<div >
    <img src="https://static.kfc.fr/images/web/hamburger/lg/menu.png?v=4PjeG3"
    alt="image de kfc" >                    
    <img src="https://i.ytimg.com/vi/fiIJeeHJjPc/maxresdefault.jpg"
    alt="image de kfc" >
</div>
</div>

JS :

function changeOpacity() {
            
            var imagekfc = document.querySelectorAll(".kfc");
            imagekfc.forEach( i => i.style.opacity = "1")
         
        }   
        document.querySelector("#kfc").addEventListener("click",changeOpacity)

CodePudding user response：

document.querySelector("#kfc").addEventListener("click",changeOpacity)

with this, you're adding the event listener to the images with id=kfc but in your function, you are changing the opacity of images with class=kfc.

You need to add "kfc" class to the image in your example

<img id = "kfc"  src="https://e7.pngegg.com/pngimages/743/385/png-clipart-kfc-hamburger-fried-chicken-logo-kfc-cdr-text.png" alt="image logo de kfc">

CodePudding user response：

I didn't understand your question too well. Are you trying to create something where the KFC images are initially transparent and when clicked, become fully opaque? If so, try something like the following.

HTML:

. . .

<div >
    <img src="https://static.kfc.fr/images/web/hamburger/lg/menu.png?v=4PjeG3"
    alt="image de kfc" >                    
    <img src="https://i.ytimg.com/vi/fiIJeeHJjPc/maxresdefault.jpg"
    alt="image de kfc" >
</div>

CSS:

div.imgGame img.kfc {
    opacity: 0.5;

    /* this line is optional - for transition. remove if you don't need */
    transition: opacity 200ms ease-out;
}

JS:

window.addEventListener("load", () => {
    const kfcImages = document.querySelectorAll("div.imgGame img.kfc");

    kfcImages.forEach(img => img.addEventListener("click", () => img.style.opacity = "1"));
});

The above JS waits for the images to load. Then it attaches an event listener to every image and when an image is clicked, the callback is fired, making that image fully opaque. I don't know if this is what you needed but I hope it helps nevertheless.

CodePudding user response：

var imagekfc = document.querySelectorAll(".kfc");

should be

    var imagekfc = document.querySelectorAll("#kfc");

. is a CSS selector for class whereas # is the selector for id