CODEWITHSUNDEEP
javascriptjqueryhtml
yfain
yfain

Reputation: 496

How to pass a html object multiple times

my problem is the following:

I have a onClick function. The function have a param with the current element object and a status code. The whole function should be redeclared at clicking the function.

onClick

<button onClick="test(1, this);">test</button>

Function

function test(status, obj) {

    if(status == 0)  $(obj).attr('onclick','test(1, '+ obj +')'); 
    else if(status == 1)  $(obj).attr('onclick','test(0, '+ obj +')');  
}

The problem is that the html element after the first click is not working. I will get the error message:

Uncaught SyntaxError: Unexpected identifier

Note: This is just a dummy function. The questions is just about the general thing.

QUESTION: Why can I not pass a the parameter obj to the function one more time?

The code is just a example of the problem. I know that there are several solutions for this. But I want to understand why it is not working.

It is also not working with this.

Upvotes: 0

Views: 92

Answers (3)

bluehipy
bluehipy

Reputation: 2294

You have a design issue. Rather then changing the handler from one event to another you should change the handler logic.

<button onClick="handler(this)">


function handler(obj){
   if(!obj.hasOwnProperty('status')) {
      // this is the first time button got clicked
      obj.status = 0; // or whatever is the initial value
   }
   switch(obj.status){
     case 0: // do whatever the 0 case should do
            obj.status = 1;
            break;
     case 1: // do whatever the 1 case should do
            obj.status = 0;
            break;
   }
}

Upvotes: 1

Rick van Lieshout
Rick van Lieshout

Reputation: 2316

No idea why you would do such a thing but it can be easily achieved using plain javscript.

Furthermore you're passing the actual object (obj) into the onclick whereas you should just use "this" because it will be evaluated later.

Solution:

function test(status, obj){
  alert(status);
  if(status == 0){
	  obj.setAttribute("onClick", "test(1,this);");
	}
	else if (status == 1){
	  obj.setAttribute("onClick", "test(0,this);");
	}
}
<!DOCTYPE html>
 
<html>
    <head>
        <title>Example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>

        <div>
            <button type="button" onclick="test(1,this);" >Click</button>
        </div>       
    </body>
</html>

The same is true for your jQuery answer:

function test(status, obj) {
  alert(status);
  if(status == 0)  $(obj).attr('onclick','test(1, this)'); 
  else if(status == 1)  $(obj).attr('onclick','test(0,this)');  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
 
<html>
    <head>
        <title>Example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div>
            <button type="button" onclick="test(1,this);" >Click</button>
        </div>
    </body>
</html>

Upvotes: 0

Xin Liu
Xin Liu

Reputation: 66

You should use the event handle api instead of attr('onclick',...)

function test(status, obj) {
    if(status == 0) {
       $(obj).off('click').click(function() {
           test(1, obj);
        }); 
    } else if(status == 1) {
       $(obj).off('click').click(function() {
           test(0, obj);
        });
    } 
}

Upvotes: 0

Related Questions