Adding a multiple buttons in 1 click

Question

I am trying to create a click event within a function, which doesn’t seem to work.

Here is my code:

<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 = "";
      }
   };
}

Basically, I just want to add more buttons with 1 click. The text2 class in where I will enter the value of how many buttons I want to add. When I change the value of divCount to 1 (divCount = 1), it is working but it is just a fixed adding of button. I am new to this so i apologize if my code in not that organized.

This code is working, but it is only adding buttons 1 by 1 with a max of 4.

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

        if(divCount < 4)
        {
            divCount++;

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

        }

    };
}

divCount is equal to count, so your if statement will never run — Rojo
– Rojo, Commented Oct 11, 2019 at 2:23
Well, each line is processed in order with a delay in between, so it will create them one by one... — Rojo
– Rojo, Commented Oct 11, 2019 at 2:25
Do you have any idea how can I add multiple buttons in 1 click within the value of the text? — GRD
– GRD, Commented Oct 11, 2019 at 2:28
@ManuelAbascal Is it possible with jquery? I have yet to experience vanilla javascript — GRD
– GRD, Commented Oct 11, 2019 at 2:51

halfer · Accepted Answer · 2019-10-12 23:20:45Z

1

I have created an <input> that takes a number's value & adds <button> tag elements depending of input's value like so:

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++;        
        }
    });  
})

Check this working code sample.

edited Oct 12, 2019 at 23:20

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Oct 11, 2019 at 3:14

Manuel Abascal

6,3577 gold badges47 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Manuel Abascal Over a year ago

@GRD Yeah mate, no worries. If you got questions about the code, let me know!

GRD Over a year ago

Question about the let elementTag = document.createElement('button');. What if I want to Clone a div using this code. Is it possible?

Manuel Abascal Over a year ago

The line let elementTag = document.createElement('button') creates a new tag element, in this case a <button> tag element & stores in a new variable elementTag. I stored it there so I could add a text to the new create <button> tag element with the line elementTag.appendChild(elementText);. You can read about document.createElement() here

Collectives™ on Stack Overflow

Adding a multiple buttons in 1 click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related