How can I pass class object to onclick function ?

[eaglehopes]

I had such a class  :

class NodeElement {
	no;
	x;
	y;
	tre;
	tdno;
	tdx;
	tdy;
	cbox;
	nodesArray;
	nodesTable;
	selected;
	constructor( x, y,nodesArray, nodesTable) {
		
		nodeCounter++;
		
		this.no = nodeCounter;
		
		this.x = x;
		this.y = y;
		this.nodesArray = nodesArray;
		this.nodesTable = nodesTable;
		
		//create elements 
		this.tre = document.createElement("tr");
		this.tre.id = "row"+this.no;
			
		this.tdno = document.createElement("td");
		this.tdno.id = this.no;
		this.tdno.innerHTML = this.no;
		
		this.cbox = document.createElement("input");
		this.cbox.type="checkbox";
		this.cbox.id="cbox"+this.no;
		this.cbox.value=this.no;
		this.cbox.name="cbox"+this.no;
		this.cbox.setAttribute('onclick','select(this)');
		
		this.tdx = document.createElement("td");
		this.tdx.id="tdx"+this.no;
		this.tdx.innerHTML = this.x;
		
		this.tdy = document.createElement("td");
		this.tdx.id="tdy"+this.no;
		this.tdy.innerHTML = this.y;
	}
}

I want to pass complete class object(i.e instantiated one) to a function select() as parameter when I click(i.e. checked the checkbox object of the class instance).

My question is that line : this.cbox.setAttribute('onclick','select(this)');

I tried that too : this.cbox.setAttribute('onclick','select("'+this+'")');  but not worked.

I could no achieve to pass neither checkbox nor the class object(NodeElement) to function select() as parameter. How can I do that?

Edited August 5, 2022 by eaglehopes
I add sentence to more clarify the question.

[eaglehopes]

I found a partial solution by using static function and pointing to this class's static function :

class NodeElement {
	no;
	x;
	y;
	tre;
	tdno;
	tdx;
	tdy;
	cbox;
	nodesArray;
	nodesTable;
	selected;
	constructor( x, y,nodesArray, nodesTable) {
		
		nodeCounter++;
		
		this.no = nodeCounter;
		
		this.x = x;
		this.y = y;
		this.nodesArray = nodesArray;
		this.nodesTable = nodesTable;
		
		//create elements 
		this.tre = document.createElement("tr");
		this.tre.id = "row"+this.no;
			
		this.tdno = document.createElement("td");
		this.tdno.id = this.no; //get node number from session node array
		this.tdno.innerHTML = this.no;
		
		this.cbox = document.createElement("input");
		this.cbox.type="checkbox";
		this.cbox.id="cbox"+this.no;
		this.cbox.value=this.no;
		this.cbox.name="cbox"+this.no;
		// INSTEAD OF THIS ONE  -> this.cbox.setAttribute('onclick','select()'); I USED BELOW ONE AND static FUNCTION I DEFINED BELOW
		this.cbox.setAttribute('onclick','NodeElement.selecting()');

		this.tdx = document.createElement("td");
		this.tdx.id="tdx"+this.no;
		this.tdx.innerHTML = this.x;
		
		this.tdy = document.createElement("td");
		this.tdx.id="tdy"+this.no;
		this.tdy.innerHTML = this.y;
	}
	
	static selecting() {
		var source =  window.event.target || window.event.srcElement ;
		if(source.checked) {
			console.log("selected...");
		} else {
			console.log("un selected...");
		}
	}
}

 

[eaglehopes]

I found a partial solution by using static function and pointing to this class's static function :

class NodeElement {
	no;
	x;
	y;
	tre;
	tdno;
	tdx;
	tdy;
	cbox;
	nodesArray;
	nodesTable;
	selected;
	constructor( x, y,nodesArray, nodesTable) {
		
		nodeCounter++;
		
		this.no = nodeCounter;
		
		this.x = x;
		this.y = y;
		this.nodesArray = nodesArray;
		this.nodesTable = nodesTable;
		
		//create elements 
		this.tre = document.createElement("tr");
		this.tre.id = "row"+this.no;
			
		this.tdno = document.createElement("td");
		this.tdno.id = this.no; //get node number from session node array
		this.tdno.innerHTML = this.no;
		
		this.cbox = document.createElement("input");
		this.cbox.type="checkbox";
		this.cbox.id="cbox"+this.no;
		this.cbox.value=this.no;
		this.cbox.name="cbox"+this.no;
		// INSTEAD OF THIS ONE  -> this.cbox.setAttribute('onclick','select()'); I USED BELOW ONE AND static FUNCTION I DEFINED BELOW
		this.cbox.setAttribute('onclick','NodeElement.selecting()');

		this.tdx = document.createElement("td");
		this.tdx.id="tdx"+this.no;
		this.tdx.innerHTML = this.x;
		
		this.tdy = document.createElement("td");
		this.tdx.id="tdy"+this.no;
		this.tdy.innerHTML = this.y;
	}
	
	static selecting() {
		var source =  window.event.target || window.event.srcElement ;
		if(source.checked) {
			console.log("selected...");
		} else {
			console.log("un selected...");
		}
	}
}

I found my mistake and solved the problem : static code did not solve my problem since I could not pass an instance of class there, since it is a static. 

My error was that, I was using the single quote since in https://www.codegrepper.com/code-examples/javascript/setattribute+onclick  the sample code is like that for setting attribute for onclick event. However, when I changed singlequote to double quote I did what I want :

Here is the working code :

 

class NodeElement {
	no;
	x;
	y;
	tre;
	tdno;
	tdx;
	tdy;
	cbox;
	nodesArray;
	nodesTable;
	selected;
	constructor( x, y,nodesArray, nodesTable) {
		
		nodeCounter++;
		
		this.no = nodeCounter;
		
		this.x = x;
		this.y = y;
		this.nodesArray = nodesArray;
		this.nodesTable = nodesTable;
		
		//create elements 
		this.tre = document.createElement("tr");
		this.tre.id = "row"+this.no;
			
		this.tdno = document.createElement("td");
		this.tdno.id = this.no; //get node number from session node array
		this.tdno.innerHTML = this.no;
		
		this.cbox = document.createElement("input");
		this.cbox.type="checkbox";
		this.cbox.id="cbox"+this.no;
		this.cbox.value=this.no;
		this.cbox.name="cbox"+this.no;
		// THIS PIECE OF CODE IS NOT WORKING FOR ME  -> this.cbox.setAttribute('onclick','select()'); BELOW CODE WORKS LIKE A CHARM
		this.cbox.setAttribute("onclick","select()");
		
		this.tdx = document.createElement("td");
		this.tdx.id="tdx"+this.no;
		this.tdx.innerHTML = this.x;
		
		this.tdy = document.createElement("td");
		this.tdx.id="tdy"+this.no;
		this.tdy.innerHTML = this.y;
	}
}

 

[eaglehopes]

I must also add the select function to complete solution how can I "pass the class object"(i.e. more correctly "find" the event source/ sender object among other class instances ) :

 

function select() {  //alternative function to find which checkbox is selected and its object
	var source =  window.event.target || window.event.srcElement ;
	for (let i = 0; i<nodesArray.length ; i++ ) {
		let ne = nodesArray[i];  // node element
		if(ne.cbox === source ) {
			ne.setSelect(ne.cbox.checked); // I defined a setSelect in class object too...
			console.log("node " +ne.no +" selected : ?"+ne.isSelected() );
		}
	}
}

Then I can reach the class object. I could not find the way to pass it directly.

[eaglehopes]

Please forgive my impatience  🙏 . I am asking the question and not leaving it there, I am continuing to solve it and when I found a working solution or I am close to solve it or I understand my mistake, I am writing here. 😇

[Barand]

I am curious - what was the original problem for which you have the above as a solution?

[eaglehopes]

To pass the NodeElement class instace object to function. Like this in java :

public class NodeElement {

NodeElement() { }

public Checkbox  cbox;

...

}

in another java file I can do this :

import ....;

NodeElement n1=new NodeElement();

if(n1.cbox.checked) {

select(n1);

}

My aim was to do similar thing in javascript. But I could not do that , instead I did above.

[kicken]

Don't use setAttribute to attach your onclick handler.  Use addEventListener.  Combine that with a closure that calls your select function and you can just pass the current object as a parameter the same as you would anything else.  Looking at your select function, I don't think it's necessary though.

 

this.cbox.addEventListener('click', () => {
	this.setSelect(this.cbox.checked);
});

 

[eaglehopes]

I did not know that. Thank you very much !