javascript - 一键添加多个按钮

Question

我试图在一个函数中创建一个点击事件，但似乎不起作用。

这是我的代码:

<input class="text2" type="text" name="" id="text1">
<input size="20" id="high_light" type="button" /> 
<span><a href="#" id="add"> + Add more</a></span>


var count = $('.text2').val();
var divCount = count;

window.onload = function(){
   document.getElementById("add").onclick = function(){
      if(divCount < count){
         divCount++;

         var input = document.getElementById("high_light" + divCount);
         input.parentNode.style.display = "";
      }
   };
}

基本上，我只想一键添加更多按钮。 text2 class 我将在其中输入要添加的按钮数量的值。当我将 divCount 的值更改为 1 (divCount = 1) 时，它正在工作，但它只是一个固定的添加按钮。我是新手，所以如果我的代码没有那么有条理，我深表歉意。

此代码可以正常工作，但它只会逐一添加按钮，最多 4 个。

window.onload = function(){
    document.getElementById("add").onclick = function(){

        if(divCount < 4)
        {
            divCount++;

            var input = document.getElementById("high_light" + divCount);
            input.parentNode.style.display = "";

        }

    };
}

Answer 1

我创建了一个 <input>取一个数字的值并添加 <button>根据输入值标记元素，如下所示:

HTML:

<input class="text2" type="text" name="" id="inputValue">
<input size="20" id="high_light" type="button" /> 

<!-- Buttons will show up inside this <div> wrapper -->
<div id="button-displayer"></div>

<span><a href="#" id="add"> + Add more</a></span>

JavaScript:

$(document).ready(() =>{
    let inputValue = document.getElementById('inputValue');
    let addButton = document.getElementById("add");

    addButton.addEventListener('click', () => {
        let inputValueToNumber = Number(inputValue.value)

        let i = 0;

        while(i < inputValueToNumber ) {
            addButton = () => {

               let elementTag = document.createElement('button');
               let elementText = document.createTextNode('New button');

               elementTag.appendChild(elementText);

               let buttonDisplayer = document.getElementById('button-displayer');
               buttonDisplayer.appendChild(elementTag)
            }

            addButton();
            i++;        
        }
    });  
})

检查这个 working code sample .