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: stackoverflow.com/questions/359788/… — T. Dirks
– T. Dirks, Commented Oct 25, 2018 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
– Jayanth, Commented Oct 25, 2018 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
– user3280899, Commented Oct 25, 2018 at 11:50

rafaelcastrocouto · Accepted Answer · 2018-10-25 18:24:32Z

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, 2018 at 18:24

answered Oct 25, 2018 at 12:16

rafaelcastrocouto

12.2k3 gold badges41 silver badges67 bronze badges

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

7 Comments

user3280899 Over a year ago

Hi @rafaelcastrocouto - using the above code, i don't get any error message also it does not take call_function :-(.

rafaelcastrocouto Over a year ago

My bad, I forgot to edit the event name onchange to change. I've updated the answer, plz try it now.

user3280899 Over a year ago

No luck... getting this error -- Uncaught TypeError: call_function is not a function at HTMLInputElement.<anonymous>

rafaelcastrocouto Over a year ago

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.

user3280899 Over a year ago

Hi @rafaelcastrocouto - Thanks a lot for your time. I need to learn more in-depth knowledge on JavaScript. Have a wonderful weekend.

|

Collectives™ on Stack Overflow

set dynamic javascript function name from a variable

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related