0

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">

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" class="something" 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>
Ulquiorra Schiffer
  • 219
  • 2
  • 15
  • In the code snippet that works, you have 3 input elements with `something` class names hence the javascript gets 3 elements to loop through and increment. In the one that doesn't work, you have only one input element with `something` class name – BrunoElo Nov 06 '21 at 06:44
  • https://prnt.sc/1yiked0 this is what happens when i append my array to the HTML. – Ulquiorra Schiffer Nov 06 '21 at 07:32
  • @UlquiorraSchiffer from where you are getting keys.length? – TBA Nov 06 '21 at 07:34
  • I added the full script. My keys.length are generated by the data i fetched from DB – Ulquiorra Schiffer Nov 06 '21 at 09:47

2 Answers2

0

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.

EgoPingvina
  • 734
  • 1
  • 10
  • 33
Imran Aftab Rana
  • 1
  • 1
0

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);
 }
BrunoElo
  • 360
  • 6
  • 11
  • Hi. I'm sorry for the confusion. But my target is auto-increment should work on my appended. My snippet is just a representation of the function i want to apply on my appended. – Ulquiorra Schiffer Nov 06 '21 at 07:44