Показать сообщение отдельно
  #1 (permalink)  
Старый 19.06.2019, 16:43
Новичок на форуме
Отправить личное сообщение для bohdan_a Посмотреть профиль Найти все сообщения от bohdan_a
 
Регистрация: 19.06.2019
Сообщений: 8

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

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);
Ответить с цитированием