Нужна помощь по событиям

[bohdan_a]

Не могу понять, как "убыть" событие. Я кликаю на ячеку таблицы, у меня появляется модальное окно, в котором у меня инпут, что переноситься в ту ячейку, куда я изначально нажал. НО, когда выбираю другую ячейку, ввожу информацию, то оно добавляет текст и в первую ячейку, которую я нажал первый раз, и во вторую. Как "убить" клик на первой ячейке? Сделать так, чтобы информация добавлялась только в нужную ячейку

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);

[Dilettante_Pro]

bohdan_a,
А зачем вы назначаете обработчики событий на save и cancel внутри функции openModal?
Вот они у вас и плодятся с каждым открытием окна.

[bohdan_a]

если их вынести, то я не могу тогда добраться до нужной мне ячейки, чтобы вставить введенный в инпут текст

[Dilettante_Pro]

bohdan_a,
Можно запоминать нужную ячейку в глобальной переменной

[bohdan_a]

можно пример?

[Malleys]

{
	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);
	}
}

Код так и просится, чтобы был класс 😀

[bohdan_a]

спасссссссииииииииииибооо ооо