How do I make each button work?

Using a script, I made clones of the & lt; div id = "conteiner-form" class = "conteiner-form" & gt; block, this is a form to fill out, to open it you need to click the button with a plus, so here's how to make all the plus buttons work and the buttons that are in the form itself?

<!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 id="di123">
  <div id="conteiner-form" class="conteiner-form">
    <button class="menu">+</button>  
    <div id="content-menu">
        <button class="close">Скрыть</button>
        <input type="text" class="input">
        <textarea class="text"></textarea>
        <button class="read">Вывести</button>
        <button class="del">Очистить список задач</button>
    </div>
        <h3 class="out"></h3>
</div>
</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>
<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>

import {fan1, heaList, todoList} from './listScript.js';

//let di123 = document.getElementById('di123');
//di123.style.display = "none";
let contentMenu = document.getElementById('content-menu');
contentMenu.style.display = "none";

let buttonMenu = document.getElementsByClassName('menu');

for (let i = 0; i < buttonMenu.length; i++) {
  buttonMenu[i].addEventListener("click", function() {
    contentMenu.style.display = 'block'; 
});
}

let button = document.querySelector('.read');
button.onclick = () =>{
    fan1(); 
    //contentMenu.style.display = 'none';  
};

let close = document.querySelector('.close');
close.onclick = () =>{
    
    contentMenu.style.display = 'none';  
}; 

let del = document.querySelector('.del');
del.onclick = () => {
    document.querySelector('.out').innerHTML = '';
    heaList.length = 0;
    todoList.length = 0;
}

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 = 0; j < newDiv.length; j++) {
      let clone= div.cloneNode(true);
      newDiv[j].append(clone);
    }
}

JavaScript Genevieve Rodgers, Apr 2, 2020

0 Answers

Your Answer

To place the code, please use CodePen or similar tool. Thanks you!