Помогите с заданием по js пожалуйста
Никак не получается сделать, я дурак не понимаю в чем проблема. Сделал контекстное меню но при нажатии Done! выделяется не один чекбокс а сразу все, а при изменении текста выделенный текст меняется, но все остальные пункты списка становятся пустыми
код js:
let list = document.querySelector('#list');
let btn = document.querySelector('#btn');
let text = document.querySelector('#text');
let menu = document.querySelector('#menu');
let item1 = document.querySelector('#item1')
let item2 = document.querySelector('#item2')
let item3 = document.querySelector('#item3')
btn.addEventListener('click', function() {
if (text.value) {
let child = document.createElement('li');
let div = document.createElement('div');
let check = document.createElement('input');
let txt = document.createElement('p');
check.type = 'checkbox';
txt.textContent = text.value;
div.appendChild(check);
div.appendChild(txt);
child.appendChild(div);
list.appendChild(child);
text.value = '';
// Обработчик для изменения цвета текста
check.addEventListener('change', function() {
txt.style.color = check.checked ? 'gray' : 'black';
});
// Обработчик для контекстного меню
txt.addEventListener('contextmenu', function(event) {
event.preventDefault();
menu.style.top = `${event.pageY}px`;
menu.style.left = `${event.pageX}px`;
menu.style.display = 'block';
});
item1.addEventListener('click', function(){
check.checked = true;
})
item2.addEventListener('click', function(){
text.value = txt.textContent;
text.focus();
function change(){
txt.textContent = text.value;
text.value = null;
text.removeEventListener('blur', change);
}
text.addEventListener('blur', change);
})
}
});
// Скрытие контекстного меню при клике в любом месте
window.addEventListener('click', function() {
menu.style.display = 'none';
});
let list = document.querySelector('#list');
let btn = document.querySelector('#btn');
let text = document.querySelector('#text');
let menu = document.querySelector('#menu');
let item1 = document.querySelector('#item1');
let item2 = document.querySelector('#item2');
let item3 = document.querySelector('#item3');
// Переменные для хранения текущего выбранного элемента
let currentCheckbox = null;
let currentText = null;
btn.addEventListener('click', function() {
if (text.value) {
let child = document.createElement('li');
let div = document.createElement('div');
let check = document.createElement('input');
let txt = document.createElement('p');
check.type = 'checkbox';
txt.textContent = text.value;
div.appendChild(check);
div.appendChild(txt);
child.appendChild(div);
list.appendChild(child);
text.value = '';
// Обработчик для изменения цвета текста
check.addEventListener('change', function() {
txt.style.color = check.checked ? 'gray' : 'black';
});
// Обработчик для контекстного меню
txt.addEventListener('contextmenu', function(event) {
event.preventDefault();
menu.style.top = `${event.pageY}px`;
menu.style.left = `${event.pageX}px`;
menu.style.display = 'block';
// Сохраняем текущий элемент
currentCheckbox = check;
currentText = txt;
});
}
});
// Обработчики для пунктов контекстного меню (вне функции создания элементов)
item1.addEventListener('click', function() {
if (currentCheckbox) {
currentCheckbox.checked = true;
// Обновляем цвет текста
if (currentText) {
currentText.style.color = 'gray';
}
}
});
item2.addEventListener('click', function() {
if (currentText) {
text.value = currentText.textContent;
text.focus();
function change() {
if (currentText) { // Проверка, что текущий элемент всё ещё существует
currentText.textContent = text.value;
text.value = '';
}
text.removeEventListener('blur', change);
}
text.addEventListener('blur', change);
}
});
// Добавляем функцию для item3 если нужно
item3.addEventListener('click', function() {
// Ваш код для действия третьего пункта
});
// Скрытие контекстного меню при клике в любом месте
window.addEventListener('click', function() {
menu.style.display = 'none';
});
