CODEWITHSUNDEEP
javascriptparametersthis
Nitish
Nitish

Reputation: 2763

Sending this parameter in javascript function

I have checkbox as below :

<label class="checkbox"><input type="checkbox" class="serviceable_check_1" id="serviceable1" name="condition_of_materials[]" onclick="checkOnlyOne(1,obj); return false;" ><span> Serviceable</span></label>

And javascript function is :

function checkOnlyOne(slno, this) { //Error here 
  console.log(this);
  //$('.serviceable_check_1').not(this).prop('checked', false);
  if(this.checked){
     $('.serviceable_check_1').not(this).prop('checked', false);
  }
}

I am getting javascript error as Uncaught SyntaxError: Unexpected token this. How do I send this parameter onchange event ?

Upvotes: 0

Views: 163

Answers (5)

Efi Shtainer
Efi Shtainer

Reputation: 394

First for the error: you cannot name an argument "this" since it is a reserved word.

Now, "this" refers to its context of execution, thus, the onclick handler is a method of the element, and therefore will be excecuted in it's context (input element in our case).

Notice the second alert in the snippet, you will see that onclick calls the function you defined from its body, which means that this function we've defined is not a method of the input object element and therefore not "attached" to it and will be called from the context in which it was declared(the window object). 

var value = "I'm the value out of the input object";

function displayMessage(context){
  //we save the original context as arg
  alert("input's value: " + context.value);
  alert("the onclick handler:" + context.onclick);
  //but notic that the context has changed
  alert("the context in our function: " + this);
  alert("when trying without saving the previous context: " + this.value);

}
<input type="checkbox" id="subscribeToNews" value="Newsletter" onclick="displayMessage(this)"/>
<label for="subscribeToNews" >Subscribe </label>

Upvotes: 1

segu
segu

Reputation: 321

You should use .call and pass obj as first parameter to use it as this context

<input id="serviceable1" onclick="checkOnlyOne.call(obj, 1); return false;" ><span> Serviceable</span></label>

Upvotes: 1

Amor
Amor

Reputation: 75

you can get the event object

Serviceable

function checkOnlyOne(slno, e {
    console.log(e.target);
    //$('.serviceable_check_1').not(e.target).prop('checked', false);
    if(this.checked)
        $('.serviceable_check_1').not(e.target).prop('checked', false);
}

e.target is the element you clicked

Upvotes: 1

sumit chauhan
sumit chauhan

Reputation: 1300

see below snippet

function checkOnlyOne(slno, obj) { //Error here 
  console.log(obj);
  //$('.serviceable_check_1').not(this).prop('checked', false);
  if(obj.checked){
     $('.serviceable_check_1').not(obj).prop('checked', false);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox"><input type="checkbox" class="serviceable_check_1" id="serviceable1" name="condition_of_materials[]" onclick="checkOnlyOne(1,this); return false;" ><span> Serviceable</span></label>

Upvotes: 1

Potato Salad
Potato Salad

Reputation: 4650

Your this does not refer to anything. You can't put this on a function unless it is an object or part of the DOM.

You can put the this keyword on the element that will trigger the function as an argument. Then on your function, make the parameter a variable like chckbx or radiobtn if those are your elements

document.getElementById('mycheckbox').onchange = myFunction(this);

function myFunction(chckbx){
console.log(chckbx);
}

Upvotes: 1

Related Questions