创建可着色、可点击的网格 (javascript)
[英]Creating a colorable, clickable grid (javascript)
问题描述
我正在做一个学校项目（我的编程课程介绍中的最后一个）。 html和css已经给出。 我们需要允许用户创建一个网格，然后用颜色框来制作像素艺术。
我遇到了两个问题。
- 当用户点击提交以创建新表时，我的表没有清除，并且
- 我无法在网格中添加颜色。
我真的很感激可以提供的任何帮助。
// 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;
});
}
代码的rest在这里： https://github.com/shearda/pixelartmaker/
2 个解决方案
解决方案1
1 2021-01-09 17:16:29
用你的话，我假设你想要那个
- 当您单击提交时，它应该重置现有表。
- 当您更改颜色并单击任何单元格时，该单元格仅填充所选颜色。
我对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>
解决方案2
0 2021-01-09 16:01:21
幸运的是，我能够解决您的问题。 如果您需要更多解释，请在此答案下方留下评论，以便我解释...
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>
创建可点击的网格方块
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.