Надо сделать так что бы при нажатие на кнопку "+" в разных контейнерах, создавался новый div

Question

Хочу сделать что бы разные контейнеры создавался новый div. Как сделать что бы функция отслеживала в каком контейнере нажали на кнопку и создавал там новый div.

Вот функция

function addDiv() {

   let link = document.getElementById('container1');
   let element = document.createElement('div');
    element.className = "mini_box";
    element.innerHTML = "боксик"; 
 link.appendChild(element);
     // alert("Работает!");
}

Вот HTML:

<!DOCTYPE html>
<html>
<head>
    <meta accesskey="UTF-8">
    <title>Jarvis</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
        <div class="Box_body" id="container">
            <!---->

            <!-- <button type="button" class="button" id="buttonJS" onclick="addDiv()">Добавить "Боксик"</button>  -->

            <div  class="box cell-box" id="container1" >BOX1 
                <button type="button" class="button" id="buttonJS" onclick="addDiv()">+</button>
                <div class="mini_box js_card"  draggable="true">боксик </div>
                <div class="mini_box js_card" id="box1" draggable="true">боксик</div>
            </div>  

            <!---->

            <div class="box cell-box" id="container2" >BOX2
                <button class="button" id="buttonJS" onclick="addDiv()">+</button>
                <div class="mini_box js_card" id="box2" draggable="true" >боксик</div>
            </div> 

            <!---->

            <div class="box cell-box" id="container3" >BOX3
                <button class="button" id="buttonJS" onclick="addDiv()">+</button>
                <div class="mini_box js_card" id="box3" draggable="true">боксик</div>
            </div> 

        </div>
 





    <script src="script.js"></script>
</body>
</html>

Answer 1

function addDiv(el) { // изменение тут
  let link = el.parentElement; // изменение тут
  let element = document.createElement('div');
  element.className = "mini_box";
  element.innerHTML = "боксик";
  link.appendChild(element);
  // alert("Работает!");
}

<!DOCTYPE html>
<html>

<head>
  <meta accesskey="UTF-8">
  <title>Jarvis</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="Box_body" id="container">
    <!---->

    <!-- <button type="button" class="button" id="buttonJS" onclick="addDiv()">Добавить "Боксик"</button>  -->

    <div class="box cell-box" id="container1">BOX1
      <button type="button" class="button" id="buttonJS" onclick="addDiv(this)">+</button> <!-- addDiv() изменено на addDiv(this) -->
      <div class="mini_box js_card" draggable="true">боксик </div>
      <div class="mini_box js_card" id="box1" draggable="true">боксик</div>
    </div>

    <!---->

    <div class="box cell-box" id="container2">BOX2
      <button class="button" id="buttonJS" onclick="addDiv(this)">+</button> <!-- addDiv() изменено на addDiv(this) -->
      <div class="mini_box js_card" id="box2" draggable="true">боксик</div>
    </div>

    <!---->

    <div class="box cell-box" id="container3">BOX3
      <button class="button" id="buttonJS" onclick="addDiv(this)">+</button> <!-- addDiv() изменено на addDiv(this) -->
      <div class="mini_box js_card" id="box3" draggable="true">боксик</div>
    </div>

  </div>






  <script src="script.js"></script>
</body>

</html>

БЛОГ НА HUSL

Надо сделать так что бы при нажатие на кнопку "+" в разных контейнерах, создавался новый div

Ответы (1 шт):