我目前正在尝试在我的像素艺术程序中实现绘画功能，但我遇到的问题是，当我将 eventListener 添加到我想要绘画的元素时，没有任何反应。我检查了控制台中的测试并更改了 CSS 中的元素颜色，它成功地更改了颜色。我在 JavaScript 代码页面下方显示我的代码问题:
JavaScript
document.addEventListener('submit', function(event) {
const height = document.querySelector('#inputHeight').value;
const width = document.querySelector('#inputWidth').value;
// cause the 'submit' to not reset page
event.preventDefault();
// When size is submitted by the user, call makeGrid()
makeGrid(height, width);
});
function makeGrid(wid, hi) {
// Clear the canvas after every 'submit' event
let pixelNode = document.querySelector('#pixelCanvas');
while (pixelNode.firstChild) {
pixelNode.removeChild(pixelNode.firstChild);
}
// Select size input
let shelfWidth = "";
for (let i = 0; i < wid; i++) {
shelfWidth += '<td></td>';
}
let row = document.querySelector('#pixelCanvas');
const HTMLToAdd = '<tr>' + shelfWidth + '</tr>';
for (let j = 0; j < hi; j++) {
row.insertAdjacentHTML('afterbegin', HTMLToAdd);
}
}
Here is my issue I see nothing wrong with my code and I dont know why this wouldn't assign each element with the color the user chooses. The variable 'color' is a string that I am concatenating to the rest of the CSSText.
// Select color input
document.querySelector('td').addEventListener('click', function() {
// collect color value from picker to pass into paint funtion
const color = document.querySelector('#colorPicker').value;
document.querySelector('td').style.CSSText = ('background-color: ' + color);
});
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pixel Art Maker!</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Lab: Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker">
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" value="4">
<br>
Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="4">
<br>
<br>
<input type="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixelCanvas">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script src="designs.js"></script>
</body>
</html>
最佳答案
有几个问题，但最相关的是表格单元格 (td) 是空的，因此无法点击或绘制。
document.addEventListener('submit', function(event) {
// cause the 'submit' to not reset page
event.preventDefault();
handleSubmitEvent();
});
function handleSubmitEvent(){
const height = document.querySelector('#inputHeight').value;
const width = document.querySelector('#inputWidth').value;
// When size is submitted by the user, call makeGrid()
makeGrid(height, width);
}
function makeGrid(wid, hi) {
// Clear the canvas after every 'submit' event
let pixelNode = document.querySelector('#pixelCanvas');
while (pixelNode.firstChild) {
pixelNode.removeChild(pixelNode.firstChild);
}
// Select size input
let shelfWidth = "";
for (let i = 0; i < wid; i++) {
shelfWidth += '<td>cell</td>';
}
let row = document.querySelector('#pixelCanvas');
const HTMLToAdd = '<tr>' + shelfWidth + '</tr>';
for (let j = 0; j < hi; j++) {
row.insertAdjacentHTML('afterbegin', HTMLToAdd);
}
// assign a click handler to the whole table and check whether a cell was clicked
row.addEventListener('click', function(event) {
// collect color value from picker to pass into paint funtion
var cell = event.target;
if(cell.tagName.toLowerCase()=="td"){
const color = document.querySelector('#colorPicker').value;
event.target.style['background-color'] = color;
}
});
}
// draws 4x4 grid at the beginning so that you to not have to write td hardcoded
handleSubmitEvent();<!DOCTYPE html>
<html>
<head>
<title>Pixel Art Maker!</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
</head>
<body>
<h1>Lab: Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker">
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" value="4">
<br>
Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="4">
<br>
<br>
<input type="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>
</body>希望对你有帮助。
关于javascript - 使用 JavaScript DOM 更改特定元素的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50313975/