How do I make each button work?

  • 0
    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!