Попытка создать динамическую таблицу с ванильным Javascript, код не работает - PullRequest
Новая
       19

Попытка создать динамическую таблицу с ванильным Javascript, код не работает

0 голосов
/ 07 сентября 2018

Что я пытаюсь построить:

Я пытаюсь создать Pixel Art Maker, который, по сути, представляет собой пустую сетку определенного пользователем размера, и цвет каждого поля в сетке изменяется при нажатии на нее.

Проблема:

Мне удалось выяснить изменение цвета, но я не могу заставить таблицу появляться вообще.

Я уже смотрел на создание динамической таблицы на основе пользовательского ввода кажется, это самая близкая вещь, которую я могу найти к тому, чего я пытаюсь достичь. Есть логика, аналогичная таблицам, но я слишком неопытен, чтобы понять разницу между этим кодом и моим.

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>

1 Ответ

0 голосов
/ 07 сентября 2018

Это потому, что вы вызвали номер строки и столбца при запуске, поэтому его 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>
...