What's "this" in JavaScript onclick?

Javascript

Javascript Problem Overview


<a onclick="javascript:func(this)" >here</a>

What does this mean in the script?

Javascript Solutions


Solution 1 - Javascript

In the case you are asking about, this represents the HTML DOM element.

So it would be the <a> element that was clicked on.

Solution 2 - Javascript

It refers to the element in the DOM to which the onclick attribute belongs:

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
  $(e).text('there');
}
</script>
<a onclick="func(this)">here</a>

(This example uses jQuery.)

Solution 3 - Javascript

The value of event handler attributes such as onclick should just be JavaScript, without any "javascript:" prefix. The javascript: pseudo-protocol is used in a URL, for example:

<a href="javascript:func(this)">here</a>

You should use the onclick="func(this)" form in preference to this though. Also note that in my example above using the javascript: pseudo-protocol "this" will refer to the window object rather than the <a> element.

Solution 4 - Javascript

In JavaScript this refers to the element containing the action. For example, if you have a function called hide():

function hide(element){
   element.style.display = 'none';
}

Calling hide with this will hide the element. It returns only the element clicked, even if it is similar to other elements in the DOM.

For example, you may have this clicking a number in the HTML below will only hide the bullet point clicked.

<ul>
  <li class="bullet" onclick="hide(this);">1</li>
  <li class="bullet" onclick="hide(this);">2</li>
  <li class="bullet" onclick="hide(this);">3</li>
  <li class="bullet" onclick="hide(this);">4</li>
</ul>

Solution 5 - Javascript

Here (this) is a object which contains all features/properties of the dom element. you can see by

console.log(this);

This will display all attributes properties of the dom element with hierarchy. You can manipulate the dom element by this.

Also describe on the below link:-

http://www.quirksmode.org/js/this.html

Solution 6 - Javascript

keyword this in addEventListener event

function getValue(o) {
  alert(o.innerHTML);
}

function hide(current) {
  current.setAttribute("style", "display: none");
}

var bullet = document.querySelectorAll(".bullet");

for (var x in bullet) { 
  bullet[x].onclick = function() {
    hide(this);
  };
};
 
/* Using dynamic DOM Event */
document.querySelector("#li").addEventListener("click", function() {
  getValue(this); /* this = document.querySelector("#li") Object */
});

li {
  cursor: pointer;
}

<ul>
  <li onclick="getValue(this);">A</li>
  <li id="li" >B</li>
  <hr />
  <li class="bullet" >1</li>
  <li class="bullet" >2</li>
  <li class="bullet" >3</li>
  <li class="bullet" >4</li>
</ul>

Solution 7 - Javascript

When calling a function, the word "this" is a reference to the object that called the function.

In your example, it is a reference to the anchor element. At the other end, the function call then access member variables of the element through the parameter that was passed.

Solution 8 - Javascript

this referes to the object the onclick method belongs to. So inside func this would be the DOM node of the a element and this.innerText would be here.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionomgView Question on Stackoverflow
Solution 1 - JavascriptTM.View Answer on Stackoverflow
Solution 2 - JavascriptStephan202View Answer on Stackoverflow
Solution 3 - JavascriptTim DownView Answer on Stackoverflow
Solution 4 - JavascriptSteffan PerryView Answer on Stackoverflow
Solution 5 - JavascriptDeepak DholiyanView Answer on Stackoverflow
Solution 6 - JavascriptanteloveView Answer on Stackoverflow
Solution 7 - JavascriptichibanView Answer on Stackoverflow
Solution 8 - JavascriptGumboView Answer on Stackoverflow