尝试使用香草Javascript创建动态表，代码无法正常工作

Question

我正在尝试构建：

我正在尝试构建Pixel Art Maker，它实际上是用户确定大小的空网格，单击时网格中每个框的颜色都会改变。

问题：

我设法弄清楚了颜色的变化，但根本无法显示表格。

我已经研究过基于用户输入创建动态表，这似乎是我所能找到的最接近的东西。 这些表有类似的逻辑，但是我缺乏经验，无法理解该代码与我的代码之间的区别。

Codepen：

Codepen链接

这是我的代码段：

 const canvas = document.querySelector('#pixelCanvas') const tbody = document.createElement('tbody'); canvas.addEventListener('click', function(e) { e.target.style.background = 'black'; }); canvas.addEventListener('dblclick', function(e) { e.target.style.backgroundColor = 'white'; }); // Store the value of columns const column = document.getElementById('column').value; // Store the value of rows const row = document.getElementById('row').value; // Access forms const submitForm = document.querySelector('#submitForm'); submitForm.addEventListener('submit', function(e) { e.preventDefault(); // Prevents the submit button from refreshing the page by default debugger; for (r = 0; r < row; r++) { const tr = document.createElement('tr'); tbody.appendChild(tr); for (c = 0; c < column; c++) { const td = document.createElement('td'); tr.appendChild(td); } canvas.appendChild(tbody); } });

 <h1>Pixel Art Maker</h1> <fieldset> <legend>Grid Size</legend> <form id='submitForm'> <label for="height">Columns:</label> <input type="number" id="column" placeholder="Key in an integer" step="1" /> <label for="width">Rows:</label> <input type="number" id="row" placeholder="Min: 1, max: 100" min="1" max="100" /> <div> <input type="submit" id="submit" value="Submit" /> </div> </form> </fieldset> <br> <div> <table id="pixelCanvas"> <!-- Dynamic pixel canvas --> </table> </div>

Answer 1

这是因为您在开始时就调用了行和列的编号，因此初始时为NULL ，在单击提交后获得了行和列的编号。
查看这个小提琴： https : //jsfiddle.net/hdsbvtLw/2/

 const canvas = document.querySelector('#pixelCanvas') const tbody = document.createElement('tbody'); canvas.addEventListener('click', function(e){ e.target.style.background = 'black'; }); canvas.addEventListener('dblclick', function(e){ e.target.style.backgroundColor = 'white'; }); // Store the value of columns // Access forms const submitForm = document.querySelector('#submitForm'); submitForm.addEventListener('submit', function(e){ e.preventDefault(); // Prevents the submit button from refreshing the page by default tbody.innerHTML=''; const column = document.getElementById('column').value; // Store the value of rows const row = document.getElementById('row').value; console.log(row); for (r = 0; r < row; r++) { const tr = document.createElement('tr'); tbody.appendChild(tr); for (c = 0; c < column; c++) { const td = document.createElement('td'); tr.appendChild(td); } canvas.appendChild(tbody); } });

 /** * index.scss * - Add any styles you want here! */ body { background: #f5f5f5; } table, thead, tbody, tfoot, tr, td { border-collapse: collapse; border: 3px solid black; } td { width: 30px; } tr { height: 30px; }

 <!DOCTYPE html> <html lang="en"> <head> <!-- Meta --> <meta charset="UTF-8" /> <title>Pixel Art</title> <!-- Styles --> <link rel="stylesheet" href="styles/index.processed.css"> </head> <body> <h1>Pixel Art Maker</h1> <fieldset> <legend>Grid Size</legend> <form id = 'submitForm'> <label for="height">Columns:</label> <input type="number" id="column" placeholder="Key in an integer" step="1" /> <label for="width">Rows:</label> <input type="number" id="row" placeholder="Min: 1, max: 100" min="1" max="100" /> <div> <input type="submit" id="submit" value="Submit" /> </div> </form> </fieldset> <br> <div> <table id="pixelCanvas"> <!-- Dynamic pixel canvas --> </table> </div> <!-- Scripts --> <script src="scripts/index.js"></script> </body> </html>

尝试使用香草Javascript创建动态表，代码无法正常工作

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-09-07 05:02:08

尝试使用香草Javascript创建动态表，代码无法正常工作

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-09-07 05:02:08

解决方案1
0 已采纳 2018-09-07 05:02:08