버튼이 작동하지 않습니다. xxxx.addEventListener는 기능이 아닙니다. 도와주세요 !

16 x 16 그리드에 스케치를 그릴 수 있는 그리드를 만들었습니다. 내가 사용하는 기본 색상으로 작동합니다. 스케치에 색상을 변경하기 위해 버튼을 추가하려고 할 때. 나는 그것을 작동시킬 수 없습니다. 다양한 방법을 시도하고 다양한 방법으로 써봤지만 몇 번이고 실패했습니다. 버튼을 클릭하면 원합니다. 스케치하면 색상이 바뀝니다. 작동하는 이전 코드와 작동하도록 시도한 방법 중 하나를 아래에 포함하겠습니다. 제 코드를 좀 봐주시겠어요?

let container = document.querySelector('.container');
let rows = document.getElementsByClassName('gridRow');
let columns = document.getElementsByClassName('gridColumn');
const blue = document.getElementsByClassName('blue');
const eraser = document.getElementsByClassName('eraser');
const black = document.getElementsByClassName('black');
let reset = document.getElementById('reset');

function createGrid(number) {
    makeRow(number);
    makeColumn(number);
    changeColours();
}

function makeRow(numberOfRow) {
    for (let i = 0; i <numberOfRow; i++) {
        let row = document.createElement('div');
        container.appendChild(row);
        row.classList.add('gridRow');
    }
}

function makeColumn(numberOfColumn, selection) {
    for ( let i = 0; i < rows.length; i++) {
        for ( let j = 0; j < numberOfColumn; j++) {
            let column = document.createElement('div');

------- 아래 부분은 제가 시도한 부분인데, 한 가지 색상으로 작업하고 싶으면 지우세요 -------

    if (selection == 'blue') {
        column.addEventListener('mouseenter', function() {
            column.classList.add('blue');
        }) 
        } else if (selection == 'eraser') {
            column.addEventListener('mouseenter', function()  {
                column.classList.add('eraser');
        })
        } else if (selection == 'black') {
            column.addEventListener('mouseenter', function()  {
                column.classList.add('black');
        })
        } else {
            column.addEventListener('mouseenter', function()  {
                column.classList.add('colored'); 
            })
        }    
            //  column.addEventListener('mouseleave', () => {
            //     column.classList.remove('colored');
            //  })

------- 작동하게 하려면 위 코드의 일부를 지우십시오 -------

            rows[j].appendChild(column);
            column.classList.add('gridColumn');
        }   
    }
}

------- 아래 부분은 제가 시도한 부분인데, 한 가지 색상으로 작업하고 싶으면 지우세요 -------

blue.addEventListener('click', function() {
        makeColumn(number, 'blue');
    }) 

eraser.addEventListener('click', function() {
        makeColumn(number, 'white');
    })

black.addEventListener('click', function() {
        makeColumn(number, 'black');
     })

------- 작동하게 하려면 위 코드의 일부를 지우십시오 -------

createGrid(16);

@importurl(' https://fonts.googleapis.com/css2family=Asap:wght@400;600;700&display=swap' );

body {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    background-color: beige;
    font-family: Asap, sans-serif;
    margin: 0;
    padding: 0;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.header {
    display: flex;
    flex: 1;
    justify-content: center;

}

#setGridSize {
    display: inline-flex;
    justify-content: center;
    flex: 1;
    gap: 12px;
}

#guide {
    text-align: center;
    margin: 1px;
    font-family:  Asap, sans-serif;
    color: red;
    font-size: 13px;;
}

.container {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    border: 1px solid black;
    width: 550px;
    height: 550px;
}

.gridColumn {
    display: inline-flex;
    border: 1px solid beige;
    margin: -1px 0;
    width: 30px;
    height: 30px;
}

.colored{
    background: red;
  }

  .buttons {
    display: flex;
    flex: 1;
    gap: 20px;
    margin: 10px;
  }

  .blue {
    background: blue;
  }

  .eraser {
    background: white;
  }

  .black {
    background: black;
  }


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation and Events</title>
    <script src="javascript.js" defer></script>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1 class="header"> Let's sketch ! </h1>
    <div id="setGridSize">
        <p> Grid size </p> <input type="text" placeholder="Size of Board" class="size-box"> 
        <button id="submit" > Submit </button>
    </div>
    <p id="guide"> Enter a number between 2 to 99</p>

      <div class="container"></div>

     <div class="buttons">
        <button class="blue"> Blue </button>
        <button class="eraser" > Eraser </button>
        <button class="black"> Black </button>
        <button class="rainbow" > Rainbow </button>
        <button class="reset" > Reset</button>
     </div> 
</body>
</html>

Reference

이 문제에 관하여(버튼이 작동하지 않습니다. xxxx.addEventListener는 기능이 아닙니다. 도와주세요 !), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jabrij93/buttons-not-working-xxxxaddeventlistener-is-not-a-function-please-help--427d

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

버튼이 작동하지 않습니다. xxxx.addEventListener는 기능이 아닙니다. 도와주세요 !

Reference

좋은 웹페이지 즐겨찾기