28 / 22 / 11
Регистрация: 24.01.2011
Сообщений: 498
1

Изменение текста и сохранение при клике

19.02.2020, 10:22. Показов 1168. Ответов 2
Метки нет (Все метки)

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
function onEditHandler({ target }) {
        if (target.classList.contains('edit-btn')) {
            const parent = target.closest('[data-task-id]');
            const editBtn = parent.querySelector('.edit-btn');
            const title = parent.querySelector('span');
            const editTitleInput  = document.createElement('input');
            editTitleInput.classList.add('w-100');
            editTitleInput.value = title.textContent;
            parent.replaceChild(editTitleInput, title);
            editBtn.textContent = 'Сохранить';
            
        }
}
При клике на кнопку "Изменить", кнопка меняет текст на "Сохранить", а span появляется в input. Вот только дальше не могу сообразить, как сделать, чтобы сохранились изменения текста и кнопка вернулась в первоначальное состояние. Момент который не понятен, как проверить второй клик по кнопке?
__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
19.02.2020, 10:22
Ответы с готовыми решениями:

Изменение текста при клике
Добрый день, подскажите , как менять текст на показать/скрыть при нажатии на кнопку, вот рабочий...

Изменение форматирования текста при клике
Здравствуйте. Будьте добры, подскажите. Есть такой хид сайта:...

Рандомное изменение текста и картинок при клике
Всем добрый день! Я начинающий флешер (могу делать простые анимашки, но с AS плохо лажу) мне...

Изменение размера картинки при клике на нее и сохранение размеров пока курсор на ней
Есть картинка, при клике на нее, она увеличивается и сохраняет свои размеры до тех пор, пока на ней...

2
the hardway first
Эксперт JS
2351 / 1750 / 874
Регистрация: 05.06.2015
Сообщений: 3,492
19.02.2020, 10:33 2
Почему бы не сделать две разных кнопки и показывать нужную в зависимости от состояния (отображение / редактирование)... чего бы там у вас не было?
1
28 / 22 / 11
Регистрация: 24.01.2011
Сообщений: 498
25.02.2020, 14:25  [ТС] 3
Цитата Сообщение от j2FunOnly Посмотреть сообщение
Почему бы не сделать две разных кнопки и показывать нужную в зависимости от состояния (отображение / редактирование)... чего бы там у вас не было?
не могу понять как это сделать, вот что у меня
объект задачи
Javascript
1
2
3
4
5
6
{
        _id: key,
        title: title,
        body: body,
        edit: false
}
функция отрисовки
Javascript
1
function listItemTemplate({_id, title, body} = {}){...}
и функция редактирования
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function onEditHandler({ target }) {
        if (target.classList.contains('edit-btn')) {
            const parent = target.closest('[data-task-id]');
            const editBtn = parent.querySelector('.edit-btn');
            const title = parent.querySelector('span');
            const body = parent.querySelector('p');
            const editTitleInput  = document.createElement('input');
            const editBodyInput  = document.createElement('textarea');
            editTitleInput.classList.add('w-100');
            editTitleInput.value = title.textContent;
            editBodyInput.classList.add('w-100');
            editBodyInput.value = body.textContent;
            parent.replaceChild(editTitleInput, title);
            parent.replaceChild(editBodyInput, body);
            editBtn.textContent = 'Сохранить';
        }
    }
и вот я не пойму где и как использовать свойство 'edit'

Добавлено через 1 час 44 минуты
сделал вот так
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
function onEditHandler({ target }) {
        if (target.classList.contains('edit-btn')) {
            const parent = target.closest('[data-task-id]');
            const id = parent.dataset.taskId;
            const editBtn = parent.querySelector('.edit-btn');
            if (editBtn.textContent === 'Сохранить'){
                console.log('Сохраняю');
                saveTask(id);
                return;
            }else {
                const title = parent.querySelector('span');
                const body = parent.querySelector('p');
                const editTitleInput  = document.createElement('input');
                const editBodyInput  = document.createElement('textarea');
                editTitleInput.classList.add('w-100');
                editTitleInput.value = title.textContent;
                editBodyInput.classList.add('w-100');
                editBodyInput.value = body.textContent;
                parent.replaceChild(editTitleInput, title);
                parent.replaceChild(editBodyInput, body);
                editBtn.textContent = 'Сохранить';
                return;
            }
        }
    }
 
    function saveTask(id) {
        const task = document.querySelector(`[data-task-id="${id}"]`);
        const editBtn = task.querySelector('.edit-btn');
        const inputTitle = task.querySelector('input');
        const textBody = task.querySelector('textarea');
        const title = document.createElement('span');
        const body = document.createElement('p');
        title.textContent = inputTitle.value;
        title.style.fontWeight = 'bold';
        body.textContent = textBody.value;
        body.classList.add('mt-w', 'w-100');
        task.replaceChild(title, inputTitle);
        task.replaceChild(body, textBody);
        editBtn.textContent = 'Изменить';
        console.log(title.textContent);
        localStorage.setItem(id, JSON.stringify({
              title: title.textContent,
              body: body.textContent
        }));
 
 
    }
скажите, пожалуйста адекватный ли это подход? И при устройстве на работу junior`ом, хватит ли такой логики?
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.02.2020, 14:25
Помогаю со студенческими работами здесь

Toggle и изменение текста кнопки при клике на нее
По нажатию на кнопку "Подробнее" срабатывает toggle и раскрывается div. Как только я нажал на...

Изменение текста в TextBox элемента в GridView при клике мышью
Здравствуйте, господа. Есть у меня GridView, который заполняется из файла json. У элемента есть...

Изменение блоков при клике
Всем привет, заранее извиняюсь, возможно, за глупый вопрос. В общем, есть 2 блока и 1 кликабельный...

Изменение размера кнопки при клике
Привет читателям CF.ru. Задача в следующем: Есть древний hta.Тыкаем ЛКМ уменьшаем на 2px при...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru