创建一个可着色、可点击的网格(javascript)

我正在做一个学校项目(编程课程简介中的最后一个项目(。html和css已经给出。我们需要允许用户创建一个网格，然后颜色框来制作像素艺术

我遇到了两个问题。

当用户点击submit创建新表时，我的表没有被清除，并且
我无法将颜色输入网格

如果能提供任何帮助，我将不胜感激。

// Select color input
let inputColor = document.getElementById ("colorPicker");
// Select size input
let table = document.getElementById("pixelCanvas");
let iHeight = document.getElementById ("inputHeight");
let iWidth = document.getElementById ("inputWidth");

// Make the grid
let sPicker = document.getElementById("sizePicker");
sPicker.addEventListener("submit", function(event) {
event.preventDefault();
makeGrid()
});

// When size is submitted by the user, call makeGrid()
function makeGrid() {
const height = iHeight.value;
const width = iWidth.value;
for (var w = 0; w < width; w++){
const row = table.insertRow();
for (var h = 0; h < height; h++){
const cell = row.insertCell();
}
}
let cPicker = document.getElementsByClassName("cell");
cPicker.addEventListener("click", function (event) {
event.preventDefault();
cell.style.backgroundColor = inputColor;
document.appendChild("cell");
table.innerHTML = grid;
});
}

代码的其余部分在这里：https://github.com/shearda/pixelartmaker/

用你的话来说，我假设你想要

当您单击Submit时，它应该会重置现有的表
当您更改颜色并单击任何单元格时，该单元格将仅填充选定的颜色

我对js和html文件做了一些更改

Html文件更改：用相同id的div替换表
JS更改您错误地附加了事件侦听器


/* you didn't attach any class to your cell so you will get null in this,
and getByClassName returns list of elements so you need to iterate over the list to attach event
*/
let cPicker = document.getElementsByClassName("cell"); 
cPicker.addEventListener("click", function (event) {
event.preventDefault();
cell.style.backgroundColor = inputColor;
document.appendChild("cell");
table.innerHTML = grid;
});

试试

// Select color input
let inputColor = document.getElementById("colorPicker");
// Select size input
let tableCanvas = document.getElementById("pixelCanvas");
let iHeight = document.getElementById("inputHeight");
let iWidth = document.getElementById("inputWidth");

// Make the grid
let sPicker = document.getElementById("sizePicker");
sPicker.addEventListener("submit", function (event) {
event.preventDefault();
makeGrid()
});

// When size is submitted by the user, call makeGrid()
function makeGrid() {
let table = document.createElement('table')
const height = iHeight.value;
const width = iWidth.value;
for (let w = 0; w < width; w++) {
const row = table.insertRow();
for (let h = 0; h < height; h++) {
const cell = row.insertCell();
cell.addEventListener("click",event=>{
event.preventDefault();
event.target.style.backgroundColor = inputColor.value
})
}
}
let children = tableCanvas.childNodes? tableCanvas.childNodes:[]
if(children && children.length===1){
tableCanvas.replaceChild(table,children[0])
}else{
tableCanvas.append(table)
}
}

body {
text-align: center;
}
h1 {
font-family: Monoton;
font-size: 70px;
margin: 0.2em;
}
h2 {
margin: 1em 0 0.25em;
}
h2:first-of-type {
margin-top: 0.5em;
}
table,
tr,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
tr {
height: 20px;
}
td {
width: 20px;
}
input[type=number] {
width: 6em;
}

<!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>Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker">
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" value="1">
Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="1">
<input type="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<div id="pixelCanvas"></div>
<script src="designs.js"></script>
</body>
</html>

幸运的是，我能够解决您的问题。如果你需要更多的解释，请在这个答案下面留言，这样我就可以解释。。。

let table = document.getElementById("pixelCanvas");
let iHeight = document.getElementById ("inputHeight");
let iWidth = document.getElementById ("inputWidth");

let sPicker = document.getElementById("sizePicker");
sPicker.addEventListener("submit", function(event) {
event.preventDefault();
makeGrid()
});

function makeGrid() {
table.innerHTML = '';
const height = iHeight.value;
const width = iWidth.value;
let inputColor = document.getElementById("colorPicker").value;
for (var w = 0; w < width; w++){
const row = table.insertRow();
for (var h = 0; h < height; h++){
row.insertCell().style.backgroundColor = inputColor;
}
}
}

body {
text-align: center;
}
h1 {
font-family: Monoton;
font-size: 70px;
margin: 0.2em;
}
h2 {
margin: 1em 0 0.25em;
}
h2:first-of-type {
margin-top: 0.5em;
}
table,
tr,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
tr {
height: 20px;
}
td {
width: 20px;
}
input[type=number] {
width: 6em;
}

<!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>Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker">
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" value="1">
Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="1">
<input type="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>
<script src="designs.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：