I have an autoincrement texbox. For every textbox that I will make, it'll increment by 1. It works on my HTML. But when I apply it to my appended textbox. It is not working anymore. Is there anything I missed? Thank you in advance.

The snippet is just a representation of my function that i want to apply in my appended textbox.

var list = document.getElementsByClassName("something");
 for (var i = 0; i < list.length; i  ) {
 list[i].value = (i   1);
 }

// this autoincrement works because my textbox is in html

<input type="text" class="something" name="something"> 
<input type="text" class="something" name="something"> 
<input type="text" class="something" name="something">

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Html:

 <div id="result"> </div>

Script: My auto-increment does not work here in my appended textbox

 <script>

  

    let ajaxResult = []; // the pushed data will be saved here
    let save_method;
    let table;
    let base_url = "<?php echo base_url();?>";
    let result = [];
    var html = "";
    
    
    
    
    
    function removeDuplicates(result) {
      return Object.values(result.reduce((acc, curr) => {
        acc[curr.player] = acc[curr.player] || curr;
        return acc;
      }, {}))
    }
    
    
    
    const combine = (source) => {
      return source.reduce((acc, curr) => {
        if (acc[curr.weight]) {
          const levelArr = acc[curr.weight];
          const last = levelArr[levelArr.length - 1];
          if (last.length === 2) {
            levelArr.push([curr])
          } else {
            last.push(curr)
          }
        } else {
          acc[curr.weight] = [
            [curr]
          ];
        }
        return acc;
      }, {})
    };
    
    
    
    
    
    
    
    const uniquePlayers = removeDuplicates(result);
    
    
    $(document).ready(function() {
    
    var eventID = $('#eventsssiud').val();
    
    
        //datatables
        table = $("#entry_list1").DataTable({
    
    
            processing: false,
            serverSide: true,
            order: [],
            searching: false,
            paging: false,
            info: false,
    
            ajax: {
                url: "<?php echo site_url('entry/ajax_list')?>",
                type: "POST",
                async: true,
                dataType: "json",
                data: {eventID:eventID},
                 success: function(data) {
                        
                        
                     
                    result = combine(removeDuplicates(data.data2));
                      
                    
                    
                    
                    
                console.log(result);
                
                
                    
                    var keys = Object.keys(result)
                
                    
            
                    
    for (var i = 0; i < keys.length; i  ) {
    
    
      result[keys[i]].forEach(function(val) {
      var length_ = val.length;
        val.forEach(function(value, index) {
        
    var idaa = value.eventID ; 
    
    
      var count = 1;
    if (idaa == eventID){
        if (length_ == 2) {
    
          var entryIDs = index == 0 ? "entryIDM[]" : "entryIDW[]"
          var players = index == 0 ? "playerM[]" : "playerW[]"
          var weights = index == 0 ? "weightM[]" : "weightW[]"
          var lightBands = index == 0 ? "lightBandM[]" : "lightBandW[]"
          html  = `<input type="text" name="${entryIDs}" value="${value.entryID}"> 
                     <input type="text" name="${players}" value="${value.player}">
                     <input type="text" name="${weights}" value="${value.weight}">
                     <input type="text" name="${lightBands}" value="${value.lightBand}">
                     <input type="text" name="eventID" value="${value.eventID}">
                     <input type="text"  name="something"> 
                  
                    
                  
                    
    `
    
          }
          }
          
        })
      })
    }
    document.getElementById("result").innerHTML = html //add html to div
    
                    
                   
                  
                    
    
                },
            },
    
            "columnDefs": [{
                    "targets": [0], //first column
                    "orderable": false, //set not orderable
                },
                {
                    "targets": [-1], //last column
                    "orderable": false, //set not orderable
                },
    
            ],
        });
    });
      
      </script>

CodePudding user response：

Duplicate question. Please review closures in Javascript loops and problems with the var keyword in loop scope. ES6 fixed the issue by introducing let keyword. Besides, there are already many solutions to the problem as mentioned in the link given below:

JavaScript closure inside loops – simple practical example

CodePudding user response：

Move this snippet at the end of your code. You need to have the elements appended in the html before you can select them with javascript.

 var list = document.getElementsByClassName("something");
 for (var i = 0; i < list.length; i  ) {
 list[i].value = (i   1);
 }