JS在单击图像时添加事件

Question

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 class="imageAccueil">
    <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 class="imgGame">
    <img src="https://media.gqmagazine.fr/photos/6006a7ec5779952c6683660d/16:9/w_2560%2Cc_limit/burger-king-korea-stacker-4-3-2-whopper-launch-001.jpg"
    alt="image de burger king" class="king">
    <img src="https://www.journaldugeek.com/content/uploads/2019/09/mcdonald-fida-lita-12-640x361.jpg"
    alt="image de mc do" class="macdo">
    <img src="https://static.kfc.fr/images/items/lg/Menu_TowerRaclette.jpg?v=4pNBB3"
    alt="image de kfc" class="kfc">
</div>
<div class="imgGame">
    <img src="https://img.grouponcdn.com/deal/AMgjseg9WiFSo2jGrU4G4NTv5HD/AM-960x576/v1/t600x362.jpg"
    alt="image de mc do" class="macdo">
    <img src="https://www.journaldugeek.com/content/uploads/2020/08/rebel.jpg"
    alt="image de burger king" class="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" class="macdo"> 
</div>
<div class="imgGame">
    <img src="https://static.kfc.fr/images/web/hamburger/lg/menu.png?v=4PjeG3"
    alt="image de kfc" class="kfc">                    
    <img src="https://i.ytimg.com/vi/fiIJeeHJjPc/maxresdefault.jpg"
    alt="image de kfc" class="kfc">
</div>
</div>

JS:

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

Answer 1

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" class="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">

Answer 2

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 class="imgGame">
    <img src="https://static.kfc.fr/images/web/hamburger/lg/menu.png?v=4PjeG3"
    alt="image de kfc" class="kfc">                    
    <img src="https://i.ytimg.com/vi/fiIJeeHJjPc/maxresdefault.jpg"
    alt="image de kfc" class="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.

Answer 3

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

should be

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

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