Проблема в том, что для каждой отправки вы добавляете нового слушателя, не удаляя старого.Так что в первый раз все работает так, как вы хотите.Во второй раз у него есть 2 прослушивателя, и при нажатии он сначала добавляет цвет, а во втором прослушивателе событий он удаляет его.Теперь, если мы продолжим отправку, он всегда будет отменен, когда число слушателей будет четным.Если номер слушателя нечетный, он будет вести себя так, как и должен.
это то, что я бы сделал (с минимальными изменениями в вашем коде)
// Select color input
// Select size input
// When size is submitted by the user, call makeGrid()
const form = document.querySelector('#sizePicker');
form.addEventListener('submit', formSubmit);
document.querySelector('table').addEventListener('click', eventListener);
function formSubmit() {
event.preventDefault();
const width = document.querySelector('#inputWidth').value;
const height = document.querySelector('#inputHeight').value;
makeGrid(width, height);
}
function makeGrid(width, height) {
// Select Width , Height and color values
const table = document.querySelector('#pixelCanvas');
// Create the Canvas
let grid = '';
for(let i = 1; i <= width; i++) {
grid += `<tr>`
for(let j = 1; j <= height; j++) {
grid += `<td class='cell'></td>`;
}
grid += `</tr>`;
}
table.innerHTML = grid;
}
// Create event listener for the color
function eventListener(e) {
const color = document.querySelector('#colorPicker').value;
if(e.target.classList.contains('cell')) {
const event = e.target;
console.log('berfore ask', e.target);
if(event.hasAttribute('style')) {
console.log('there is style attr to remove', e.target);
event.removeAttribute('style');
} else {
console.log('there is no att so we create it', e.target);
event.style.backgroundColor = color;
}
}
}
Не только это решитВаша проблема, но это позволило бы изменить цвет из средства выбора цвета даже после выполнения onSubmit.
Причина, по которой это работает, заключается в том, что вы изменяете только содержимое элемента таблицы, а не уничтожаете его.Таким образом, слушатель все еще там, даже если содержание изменилось.