Мне нужно сделать чтобы при нажатии кнопки read выводилось значение инпутов которые есть в этом же блоке div, с помощью addEventListener.
let contentMenu = document.getElementById('content-menu');
contentMenu.style.display = "none";
let delet = document.getElementById('delete');
//delet.style.display = "none";
let acc = document.getElementsByClassName("accordion");
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
let panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
One();
function One () {
let div = document.querySelector('.conteiner-form');
let newDiv = document.getElementsByClassName('panel');
for (let j = 1; j < newDiv.length; j++) {
let clone= div.cloneNode(true);
newDiv[j].append(clone);
}
}
fanMenu();
function fanMenu() {
let conteinerForm = document.getElementsByClassName('menu');
for (let i = 0; i < conteinerForm.length; i++) {
conteinerForm[i].addEventListener("click", function() {
this.classList.toggle("active");
let form = this.closest('.conteiner-form');
let menu = form.querySelector('.content-menu');
if (menu.style.display === "block") {
menu.style.display = "none";
} else {
menu.style.display = "block";
}
});
}
}
fanRead();
function fanRead() {
let conteinerForm = document.getElementsByClassName('read');
for (let i = 0; i < conteinerForm.length; i++) {
conteinerForm[i].addEventListener("click", function() {
let menu = this.closest('.content-menu');
let read = menu.querySelector('.read');
out();
fan1();
});
}}
fanDel();
function fanDel() {
let conteinerForm = document.getElementsByClassName('del');
for (let i = 0; i < conteinerForm.length; i++) {
conteinerForm[i].addEventListener("click", function() {
this.classList.toggle("active");
document.querySelector('.out').innerHTML = '';
heaList.length = 0;
todoList.length = 0;
});
}
}
function fan1 () {
let text = document.querySelector('.text');
let input = document.querySelector('.input').value;
if (input !== '' && text !== '') {
let temp = {}
temp.todo = text.value;
temp.check = false;
let i = todoList.length;
todoList[i] = temp;
//result.innerHTML = temp.todo;
out();
}else{alert('Error!')};
}
function out() {
let input = document.querySelector('.input').value;
let result = document.querySelector('.out');
let name = {};
name.todo = input;
name.check = false;
let j = heaList.length;
heaList[j] = name;
let res1 = '';
for (let key in todoList) {
res1 += heaList[key].todo + '<br>';
res1 += todoList[key].todo + '<br>';
}
result.innerHTML = '<span>' + res1 + '</span><br>';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="div-block">
<div id="delete">
<div id="conteiner-form" class="conteiner-form">
<button class="menu">+</button>
<div id="content-menu" class="content-menu">
<div id="content-menu1" class="content-menu1">
<input type="text" class="input"><br>
<textarea class="text"></textarea>
<button class="read">Вывести</button>
<button class="del">Очистить список задач</button>
</div>
</div>
</div>
</div>
<button class="accordion">Понедельник</button>
<div class="panel">
<div id="conteiner-form" class="conteiner-form">
<button class="menu">+</button>
<div id="content-menu" class="content-menu">
<div id="content-menu1" class="content-menu1">
<input type="text" class="input"><br>
<textarea class="text"></textarea>
<button class="read">Вывести</button>
<button class="del">Очистить список задач</button>
</div>
</div>
<h3 class="out"></h3>
</div>
</div>
<button class="accordion">Вторник</button>
<div class="panel">
</div>
<button class="accordion">Среда</button>
<div class="panel">
</div>
<button class="accordion">Четверг</button>
<div class="panel">
</div>
<button class="accordion">Пятница</button>
<div class="panel">
</div>
<button class="accordion">Суббота</button>
<div class="panel">
</div>
<button class="accordion">Воскресенье</button>
<div class="panel">
</div>
</div>
<script type="module" src="script.js"></script>
<script type="module" src="listScript.js"></script>
</body>
</html>
Вот код https://codepen.io/stalk000/pen/ZEOwPpW?editors=1010