文章/答案/技术大牛

发布

社区首页 >问答首页 >不工作xxxxx.addEventListener的按钮不是一个函数

问不工作xxxxx.addEventListener的按钮不是一个函数
EN

Stack Overflow用户

提问于 2022-07-28 12:29:09

回答 1查看 45关注 0票数 -2

我创建了一个16x16网格，我可以在这个网格上蚀刻一个草图。它使用的是我使用的默认颜色。当我尝试添加按钮，以改变颜色的草图。我似乎不能让它起作用。我尝试过各种方法，并用不同的方式编写了它，但一次又一次地失败了。我想当我点击按钮，它改变颜色时，我的素描。我将在下面介绍前面的代码，以及我尝试过的方法之一。任何专家/大师请看一下我的代码。

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>

javascript

html

css

回答 1

Stack Overflow用户

发布于 2022-07-28 12:53:51

也许这个小例子对你有帮助

const grid = document.querySelector('.grid');
const colorSelector = document.querySelector('input[type="color"]')

const COUNT = 8

for (let i = 0; i < COUNT; i++) {
  for (let j = 0; j < COUNT; j++) {
    const btn = document.createElement('button')

    grid.appendChild(btn)
  }
}

const btns = Array.from(grid.children)

btns.forEach(btn => {
  btn.addEventListener('mouseenter', event => {
    btn.style.backgroundColor = colorSelector.value;
  })
})

@import "https://cdn.jsdelivr.net/gh/KunalTanwar/normalize/css/normalize.inter.min.css";
body {
  height: 100%;
  display: grid;
  place-items: center;
}

.grid {
  --btn-count: 8;
  --btn-size: 24px;
  display: grid;
  grid-template-columns: repeat(var(--btn-count), var(--btn-size));
  grid-template-rows: repeat(var(--btn-count), var(--btn-size));
}

.grid button {
  border: 1px solid #d1d1d1;
}

<input type="color">

<div class="grid"></div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73152937

复制

相似问题

问不工作xxxxx.addEventListener的按钮不是一个函数
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不工作xxxxx.addEventListener的按钮不是一个函数EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不工作xxxxx.addEventListener的按钮不是一个函数
EN