时间戳

首页 > 解决方案 > JavaScript 操作 DOM（onclick 事件）

javascript - JavaScript 操作 DOM（onclick 事件）

问题描述

我有这段代码应该在每次单击按钮时添加一个红色方块的 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>

标签： javascripthtmlcssdom

解决方案

似乎您正在尝试创建一个 for 循环而不是您的函数？还有一些逻辑问题。这里有一些提示可以帮助你理解下面的代码：

  1. 在函数中声明的每个变量，只会在调用该函数时声明。调用函数后，变量将被销毁，并且在大多数情况下您无法再次访问它们。
  2. 您似乎试图在同一个函数中选择 dom 上的所有元素？如果您只是在附加到 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)

    })

推荐阅读