Jump to content

How can I pass class object to onclick function ?


eaglehopes
Go to solution Solved by kicken,

Recommended Posts

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 by eaglehopes
I add sentence to more clarify the question.
Link to comment
Share on other sites

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...");
		}
	}
}

 

Link to comment
Share on other sites

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;
	}
}

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

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);
});

 

  • Great Answer 1
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.