set dynamic javascript function name from a variable

Question

I have a dynamic table created. And which I have a td which has onchange attribute. So every row has this td with onchange function.

I have a set of variables like call_function_1, call_function_2, call_function_3 etc.

 
    var arrHead = new Array();
    arrHead = ['', 'Title', 'Title2', 'Title3'];     

    function createTable() {
        var empTable = document.createElement('table');
        empTable.setAttribute('id', 'empTable');           

        var tr = empTable.insertRow(-1);

        for (var h = 0; h < arrHead.length; h++) {
            var th = document.createElement('th');          
            th.innerHTML = arrHead[h];
            tr.appendChild(th);
        }

        var div = document.getElementById('cont');
        div.appendChild(empTable);    
    }

    
 function addRow() {
        var empTab = document.getElementById('empTable');
  
        var rowCnt = empTab.rows.length;        
 
  var tr = empTab.insertRow(rowCnt);    
        tr = empTab.insertRow(rowCnt);

  if (rowCnt == 1)  { var tempRow = rowCnt; }
  else if (rowCnt == 3) { var tempRow = +rowCnt - +1; }
  else if (rowCnt == 5) { var tempRow = +rowCnt - +2; }
  else if (rowCnt == 7) { var tempRow = +rowCnt - +3; }
  else if (rowCnt == 9) { var tempRow = +rowCnt - +4; }
  
  var call_function = "call_function"+ tempRow;
        var call_function = window[call_function];
  
        for (var c = 0; c < arrHead.length; c++) {
            var td = document.createElement('td');         
            td = tr.insertCell(c);

            if (c == 0) {          
           
                var button = document.createElement('input');       
                button.setAttribute('type', 'button');
                button.setAttribute('value', 'Remove');
                button.setAttribute('onclick', 'removeRow(this)');
                td.appendChild(button);
            }
            else if (c == 1) {               
                var ele = document.createElement('input');
                ele.setAttribute('type', 'text');
                ele.setAttribute('value', '');
                td.appendChild(ele);
            }
   else if (c == 2) {       
                var ele = document.createElement('input');
                ele.setAttribute('type', 'text');
                ele.setAttribute('value', '');

                td.appendChild(ele);
            }
   else if (c == 3) {
     var DTab = document.createElement('input');
                 DTab.setAttribute('type', 'text');
                DTab.setAttribute('value', '');
    DTab.setAttribute('name', 'school');
    DTab.setAttribute('id', 'school');
 
   DTab.addEventListener('change', function (event) { call_function(event.target.value) }.bind(call_function) );
   
                td.appendChild(DTab);    
            }
        }
    }
    function removeRow(oButton) {
        var empTab = document.getElementById('empTable');
        empTab.deleteRow(oButton.parentNode.parentNode.rowIndex);      
    }

    function sumbit() {
        var myTab = document.getElementById('empTable');
        var values = new Array();

        for (row = 1; row < myTab.rows.length - 1; row++) {
            for (c = 0; c < myTab.rows[row].cells.length; c++) {  
                var element = myTab.rows.item(row).cells[c];
                if (element.childNodes[0].getAttribute('type') == 'text') {
                    values.push( element.childNodes[0].value );
                }
            }
        }
        console.log(values);
    }
 
 
function call_function1(val) {

     var root = document.getElementById("showDiv");
     var table = document.createElement('table');
     table.className = "mytable";
     var tblB = document.createElement('tbody');
     table.appendChild(tblB);

     var rowcnt = val;

     headerList = ["One", "Two"];

     var tr = document.createElement('tr');
      
      for (var j = 0; j < 3; j++) {
     var th = document.createElement('th'); 
     var text = document.createTextNode(headerList[j]);
     th.appendChild(text);
     tr.appendChild(th);
    }
     tblB.appendChild(tr);
     for (var i = 0; i < rowcnt; i++) {
    var tr = document.createElement('tr');
    tblB.appendChild(tr);
    var td = document.createElement('td');
    
    var curClmn = i+1;    

    //tr.appendChild(td);  
    for (var j = 0; j < 6; j++) {
      var input = document.createElement("input");
      input.type = "text";      
     
         
      if (curClmn >= 1 && j == 0) {
        input.name = "cellfirst" + curClmn ;
        input.value = 0;
        input.id = "cellfirst" + curClmn;
        }
        else if (curClmn >= 1 && j == 1) {
        input.name = "cellsecond" + curClmn;
        input.value = 0;
        input.id = "cellsecond" + curClmn ;
        }
       
      const td = document.createElement('td');
      td.appendChild(input);
      tr.appendChild(td);
    }
     }
     root.appendChild(table);
   }
   
function call_function2(val) {

     var root = document.getElementById("showDiv");
     var table = document.createElement('table');
     table.className = "mytable";
     var tblB = document.createElement('tbody');
     table.appendChild(tblB);

     var rowcnt = val;

     headerList = ["One", "Two"];

     var tr = document.createElement('tr');
      
      for (var j = 0; j < 3; j++) {
     var th = document.createElement('th'); 
     var text = document.createTextNode(headerList[j]);
     th.appendChild(text);
     tr.appendChild(th);
    }
     tblB.appendChild(tr);
     for (var i = 0; i < rowcnt; i++) {
    var tr = document.createElement('tr');
    tblB.appendChild(tr);
    var td = document.createElement('td');
    
    var curClmn = i+1;    

    //tr.appendChild(td);  
    for (var j = 0; j < 6; j++) {
      var input = document.createElement("input");
      input.type = "text";      
     
         
      if (curClmn >= 1 && j == 0) {
        input.name = "cellfirst" + curClmn ;
        input.value = 0;
        input.id = "cellfirst" + curClmn;
        }
        else if (curClmn >= 1 && j == 1) {
        input.name = "cellsecond" + curClmn;
        input.value = 0;
        input.id = "cellsecond" + curClmn ;
        }
       
      const td = document.createElement('td');
      td.appendChild(input);
      tr.appendChild(td);
    }
     }
     root.appendChild(table);
   }

    <style>
        table 
        {
            width: 30%;
            font: 13px ;
        }
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
    </style>

<!DOCTYPE html>
<html>
<head>
    <title>Dynamically Add Remove Table Rows in JavaScript</title>

</head>
<body onload="createTable()">

 <p>
        <input type="button" id="addRow" value="Add New Row" onclick="addRow()" />
    </p>

    <div id="cont"></div>

   <table class="QTLTable" style="border-color:#d3d3d3;border-width:0px;">
 <tr><td colspan="2" style="border:2px;align:center;border-color:#d3d3d3;">    
 <div id="showDiv" style="visibility:visible" style="border: 1px; height:200px; align: center;" ></div>
 </td></tr>
 </table>

    <p><input type="button" id="bt" value="Sumbit Data" onclick="sumbit()" /></p>
</body>

</html>

when I use this DTab.setAttribute('onchange', '"call_function"(this.value)'); - i am getting error.

How could I set this variable to td's onchange attribute. My code works fine if i use only one function (not using "" quotes).

Hope I am not confusing. Suggest me. Thanks.

Perhaps have a look at: https://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string — T. Dirks, Oct 25 '18 at 11:23
mention the error you are getting..also change the code DTab.setAttribute('onchange', 'call_function(this.value)'); to DTab.setAttribute('onchange', call_function(this.value)); function calls should not be in quotes — Jayanth, Oct 25 '18 at 11:39
Hi @Jayanth - I get this below error message : dynamic_Table.html:1 Uncaught ReferenceError: call_function is not defined at HTMLInputElement.onchange - it doesn't take the variable as call_function_1.... if i have DTab.setAttribute('onchange', 'call_function_1(this.value)'); - it works perfectly... But i need to use ( DTab.setAttribute('onchange', 'call_function(this.value)'); ) the dynamic variable as a function name. — user3280899, Oct 25 '18 at 11:50

rafaelcastrocouto · Accepted Answer · 2018-10-25T18:24:32.827

1

You need to use event listeners instead of attributes, so change this:

  DTab.setAttribute('onchange', 'call_function(this.value)');

to this:

  DTab.addEventListener('change', function (event) { call_function(event.target.value) }.bind(call_function) );

edited Oct 25 '18 at 18:24

answered Oct 25 '18 at 12:16

rafaelcastrocouto

11,781
3
38
63

Hi @rafaelcastrocouto - using the above code, i don't get any error message also it does not take call_function :-(. – user3280899 Oct 25 '18 at 13:23
My bad, I forgot to edit the event name `onchange` to `change`. I've updated the answer, plz try it now. – rafaelcastrocouto Oct 25 '18 at 14:14
No luck... getting this error -- Uncaught TypeError: call_function is not a function at HTMLInputElement. – user3280899 Oct 25 '18 at 16:21
Sorry, I thought your variable was a global variable by your question, but seems that is not the case; So you need to bind your function to the event in order to avoid this error. – rafaelcastrocouto Oct 25 '18 at 18:22
Hi @rafaelcastrocouto - getting the same error. I included the code snippet. Please run the snippet when you get a chance and see the error. Thank you so much for your help. – user3280899 Oct 26 '18 at 06:57
Now I understand it better! You are assigning a string to the variable `call_function`. Instead, assign it to the function it self (yes in JS functions are values). So change this: `var call_function = "call_function"+ tempRow;` to this: `var call_function = window["call_function"+ tempRow];` – rafaelcastrocouto Oct 26 '18 at 11:59
1

Hi @rafaelcastrocouto - Thanks a lot for your time. I need to learn more in-depth knowledge on JavaScript. Have a wonderful weekend. – user3280899 Oct 26 '18 at 15:31

set dynamic javascript function name from a variable

1 Answers1