創建可着色、可點擊的網格 (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.