JavaScript манипулирование DOM (событие onclick)

Question

У меня есть этот код, который должен добавлять div в виде красного квадрата каждый раз, когда я нажимаю кнопку. Бывает, что он добавляет div, который я хочу, 1 щелчок да и 1 щелчок нет. вот код:

var btnElement = document.querySelector('button');
console.log(btnElement);
btnElement.onclick = function() {
  var index = 0;
  var squareElementCreator = document.createElement('div');
  squareElementCreator.setAttribute('class', 'box');

  var containElement = document.querySelector('#app');
  containElement.appendChild(squareElementCreator);

  var squareElement = document.querySelectorAll('.box');
  console.log(squareElement[index]);
  squareElement[index].style.width = "100px";
  squareElement[index].style.height = "100px";
  squareElement[index].style.backgroundColor = '#f00';
  squareElement[index].style.margin = '10px';
  //console.log(squareElement);

  var container = document.querySelector('#app');
  container.appendChild(squareElement[index]);
  index++;
}

<div id="app">
  <input type="text" name="nome" id="nome" />
  <button class="botao">Adicionar</button>
</div>

Answer 1

Вы можете использовать HTML Шаблоны и слоты

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots

var btnElement = document.querySelector('button');

btnElement.onclick = function() {
  const template = document.getElementById('my-red-square').content.cloneNode(true);
  document.querySelector('#app').appendChild(template);
}

<div id="app">
  <input type="text" name="nome" id="nome" />
  <button class="botao">Adicionar</button>
</div>

<template id='my-red-square'>
<style>
    .box {
      width: 100px;
      height:100px;
      background-color: #00f;
      margin:10px;
    }
  </style>
<div class="box">
</div>
</template>

Answer 2

Похоже, вы пытаетесь создать for l oop вместо своей функции? Также есть некоторые проблемы с logi c. Вот несколько указателей, которые могут помочь вам понять приведенный ниже код:

1. Каждая переменная, объявленная в функции, будет объявлена ​​только при вызове этой функции. После вызова функции переменные уничтожаются, и в большинстве случаев вы не можете получить к ним доступ снова.
2. Кажется, вы пытаетесь выбрать все свои элементы в dom внутри одной функции? Вам не нужно этого делать, если вы просто измените свойство style перед добавлением к dom.
3. Найдите время, чтобы изучить основы, это действительно поможет вам собрать качественный код.

     var btnElement = document.querySelector('button');
     var containElement = document.querySelector('#app');
     btnElement.addEventListener('click', function () {

     var squareElement = document.createElement('div')
         squareElement.className = 'box'
         squareElement.style.width = "100px";
         squareElement.style.height = "100px";
         squareElement.style.backgroundColor = '#f00';
         squareElement.style.margin = '10px';
     containElement.appendChild(squareElement)

    })