0

const score = document.querySelector("[score]");

const image = document.querySelectorAll("[image]");

image.addEventListener("click", () => {
        score.innerHTML += '1';
  },);
  
/* Why I get TypeError: image.addEventListener is not a function. (In 'image.addEventListener("click", () => {
        score.innerHTML += '1';
  },)', 'image.addEventListener' is undefined) 
  
  
  Thankyou for your reply.*/
body{
    background: linear-gradient(to right, rgb(160, 185, 179), rgb(222, 230, 206))
}

.image00{
    display: grid;
    grid-template-columns: repeat(4,0fr);
    gap: 10px;
    margin-top: 300px;
    justify-content: center;
}

.a00.button{
    width: 100px;
    height: 100px;
    background-color: rgba(56, 15, 80, 0.411);
    cursor: pointer;
}

/*
.image:hover{
    width: 100px;
    height: 100px;
/*    background-color: rgba(196, 121, 52, 0.527); *//*
    background-image:url(blank00.png); 
    cursor: pointer;
}*/

.a00.button:hover{
    width: 100px;
    height: 100px;
    background-color: rgba(196, 121, 52, 0.527); 
/*    background-image:url(blank00.png); */
    cursor: pointer;
}

.score{
    width: 80%;
    height: 100px;
    background-color: rgba(56, 15, 80, 0.411);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Comp
    <meta name="viewport" conte
    <script src="memory00.js" c
    <link rel="stylesheet" href
    <title>memory</title>
</head>
<body>
    <h1>Score</h1>
    <div class='score'></div>
    <div class='image00'>
        <div class='image'></di
        <div class='image'></di
        <div class='image'></di
        <div class='image'></di
        <div class='image'></di
        <div class='image'></di
        <div class='image'></di
        <div class='image'></di
        <div class='image'></di
        <div class='image'></di
        <div class='image'></di
        <div class='image'></di
    </div>
</body>
</html>
<!-- open memory00.html -->
....................................................................................................................................................................................................................................................................................................................................................................................
Phuri Sottatipreedawong
  • 39
  • 3
  • `.querySelectorAll()` returns a **list** of elements. You have to iterate through them and add event listeners to each one individually. – Pointy Sep 16 '21 at 15:15
  • 1
    Aside from the problem you are asking about (which is covered by the duplicate, this is a FAQ), `[foo]` is an attribute selector, not a class selector. – Quentin Sep 16 '21 at 15:16
  • Also the selector for class "image" is `.image`, not `[image]`. – Pointy Sep 16 '21 at 15:16

0 Answers0