Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67441

How to duplicate div and increment label from input value

$
0
0

Goal: I am trying to duplicate a <div> X numbers of times based on a number input, and increment a label starting at the number 1

For example: User enters the number 5 into an input field. On change, this then replicates a <div> 5 times. Within this div, there is a single label, and this label will increment (within div #1 will be Label #1, within div #2 will be Label #2, etc.)

The following code replicates the div the number of times I need it to, but I'm not able to increment the label.

Within the code, <label> Crack #GOES HERE</label>

"#GOES HERE" should be the increment number (#1, #2, etc.)

<input type="number" class="form-control" id="nbchambre" name="nbchambre" onchange="myFunction()">

    <div id="content">                                          
    </div>

    <script>
    function myFunction(){
    var n = Number(document.getElementById("nbchambre").value);
    var content = document.getElementById('content');
    content.innerHTML="";
    for(var count = 1; count < n+1; count++){
    var div = document.createElement('div');
    div.innerHTML = '<div class="form-group"><label>Crack #GOES HERE</label><input type="number" name="email_field" id="email_field" placeholder="Crack Length in Inches" value="" class="form-control" /></div>';
    content.appendChild(div);
    }
    }
    </script>

Viewing all articles
Browse latest Browse all 67441

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>