JavaScript |创建动态按钮

我正在尝试创建一个名为“添加到购物车”的商店网站，其中包含一些

元素。每个

元素都有一个类，我想通过使用它们的类名动态地向它们添加按钮

我创建了计算类数的代码，我需要将其添加到按钮，并将其与

for

循环相结合，这样它将向每个

元素添加一个按钮，但由于某些原因，循环不起作用，它只添加到一个div

document.addEventListener（'DOMContentLoaded'，function（）{
var button=document.createElement（'button'）；
button.type='button'；
button.innerHTML='按我'；
button.className='btn styled'；
button.onclick=函数（）{
// ...
};
var classLength=document.getElementsByClassName（“col-lg-4 col-md-6 mb-4”）.length；
var i；
对于（i=0；i

在js中使用for循环创建动态按钮

<script type="text/javascript">
      for (var i = 0; i <=5; i++) {
            document.write("<button> Button </button>") ;
          }
 </script>

对于（var i=0；i您需要在循环中克隆或创建按钮

注意：我已将click事件侦听器添加到容器中


constclicked=（e）=>console.log（“clicked”，e.target.parentNode.firstChild.textContent）
addEventListener（'load'，function（））{
var button=document.createElement（'button'）；
button.type='button'；
button.innerHTML='按我'；
button.className='btn styled'；
[…document.querySelectorAll（“.col-lg-4.col-md-6.mb-4”）]//注意选择器
.forEach（div=>div.appendChild（button.cloneNode（true）））
document.getElementById（“容器”）.addEventListener（“单击”，单击）；
})

1.
2.
3.
谢谢大家的帮助，真的很有帮助
我按照你的建议用下面的代码修复了它，它似乎可以工作

document.addEventListener('DOMContentLoaded', function() {
  var classLength = document.getElementsByClassName("col-lg-4 col-md-6 mb-4").length;
  var i;
  for (i = 0; i < classLength; i++){
  var button = document.createElement('button');
  button.type = 'button';
  button.innerHTML = 'Press me';
  button.className = 'btn-styled';

  button.onclick = function() {
    // ...
  };

  var container = document.getElementsByClassName("col-lg-4 col-md-6 mb-4");
  container[i].appendChild(button);
  }
}, false);

document.addEventListener（'DOMContentLoaded'，function（）{
var classLength=document.getElementsByClassName（“col-lg-4 col-md-6 mb-4”）.length；
var i；
对于（i=0；i
您需要在循环中创建或克隆按钮。a）不建议使用document.write，页面加载后禁止使用；b）根本不回答问题。他希望在每个指定的分区中都有一个按钮我会说我的答案更优雅。。。但是，嘿，这是你的网站