Нужна помощь по событиям
Не могу понять, как "убыть" событие. Я кликаю на ячеку таблицы, у меня появляется модальное окно, в котором у меня инпут, что переноситься в ту ячейку, куда я изначально нажал. НО, когда выбираю другую ячейку, ввожу информацию, то оно добавляет текст и в первую ячейку, которую я нажал первый раз, и во вторую. Как "убить" клик на первой ячейке? Сделать так, чтобы информация добавлялась только в нужную ячейку:help:
const div = document.querySelector('.working_div');
let input = document.querySelector('input');
const modal = document.querySelector('.modal');
const body = document.body;
const cancel = document.getElementById('cancel');
const save = document.getElementById('save');
function createCalendar(id, year, month) {
const table = document.createElement('table');
const header = document.createElement('tr');
const daysOfWeek = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
const daysInMonth = new Date(year, month, 0).getDate();
for (const day of daysOfWeek) {
header.insertAdjacentHTML('beforeend', `<th>${day}</th>`)
}
table.append(header);
let firstDay = new Date (year, month-1).getDay();
if (firstDay === 0 ) {
firstDay = 6;
} else {
firstDay = firstDay - 1;
}
let nextDayToAdd = 1 - firstDay;
while (nextDayToAdd <= daysInMonth) {
const week = document.createElement('tr');
for (let i = 0; i < 7; i++) {
const day = document.createElement('td');
if (nextDayToAdd > 0 && nextDayToAdd <= daysInMonth) {
day.innerHTML = nextDayToAdd;
}
nextDayToAdd++;
week.append(day);
}
table.append(week);
}
return div.append(table);
}
createCalendar("calendar", 2019, 6);
const table = document.querySelector('table');
//console.log(table);
function openModal(event) {
const target = event.target;
const td = target.closest('td');
input.value = '';
if (target.tagName != 'TD')
return;
if (!td)
return;
table.style.display = 'none';
modal.style.display = 'block';
body.style.backgroundColor = '#93978F';
cancel.addEventListener('click', returnTable);
function returnTable() {
table.style.display = 'inline';
modal.style.display = 'none';
body.style.backgroundColor = 'white';
}
save.addEventListener('click', saveModal);
function saveModal() {
event.preventDefault()
table.style.display = 'inline';
modal.style.display = 'none';
body.style.backgroundColor = 'white';
let closestTd = target.closest('TD');
let p = document.createElement('p');
p.textContent = `${input.value}`;
closestTd.append(p);
};
};
table.addEventListener('click', openModal);
|
bohdan_a,
А зачем вы назначаете обработчики событий на save и cancel внутри функции openModal? Вот они у вас и плодятся с каждым открытием окна. |
если их вынести, то я не могу тогда добраться до нужной мне ячейки, чтобы вставить введенный в инпут текст:-?
|
bohdan_a,
Можно запоминать нужную ячейку в глобальной переменной |
можно пример?
|
{
const div = document.querySelector('.working_div');
const input = document.querySelector('input');
const modal = document.querySelector('.modal');
const cancel = document.getElementById('cancel');
const save = document.getElementById('save');
const table = createCalendar("calendar", 2019, 6);
let target;
table.addEventListener('click', openModal);
save.addEventListener('click', saveModal);
cancel.addEventListener('click', returnTable);
function createCalendar(id, year, month) {
const table = document.createElement('table');
const header = document.createElement('tr');
const daysOfWeek = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
const daysInMonth = new Date(year, month, 0).getDate();
for (const day of daysOfWeek)
header.insertAdjacentHTML('beforeend', `<th>${day}</th>`)
table.append(header);
let firstDay = (new Date(year, month - 1).getDay() + 6) % 7;
let nextDayToAdd = 1 - firstDay;
while (nextDayToAdd <= daysInMonth) {
const week = document.createElement('tr');
for (let i = 0; i < 7; i++) {
const day = document.createElement('td');
if (nextDayToAdd > 0 && nextDayToAdd <= daysInMonth)
day.innerHTML = nextDayToAdd;
nextDayToAdd++;
week.append(day);
}
table.append(week);
}
div.append(table);
return table;
}
function openModal(event) {
target = event.target;
const td = target.closest('td');
input.value = '';
if (target.tagName != 'TD')
return;
if (!td)
return;
table.style.display = 'none';
modal.style.display = 'block';
document.body.style.backgroundColor = '#93978F';
}
function returnTable() {
table.style.display = 'inline';
modal.style.display = 'none';
document.body.style.backgroundColor = 'white';
}
function saveModal() {
event.preventDefault()
table.style.display = 'inline';
modal.style.display = 'none';
document.body.style.backgroundColor = 'white';
let closestTd = target.closest('TD');
let p = document.createElement('p');
p.textContent = `${input.value}`;
closestTd.append(p);
}
}
Код так и просится, чтобы был класс 😀 |
спасссссссииииииииииибооо ооо:victory:
|
| Часовой пояс GMT +3, время: 00:34. |