In languages like Ruby or Java, this (or in case of Ruby self) will always point to the object in which your method is defined. So in Ruby if you are working on the foo method inside the Bar class, self will always point to the object which is the instance of the Bar class.
JavaScript works quite surprisingly here. Because in JavaScript function context is defined while calling the function, not while defining it! This is what can surprise many when coming to JS from different fields. Such late binding is a powerful mechanism which allows us to re-use loosely coupled functions in variety of contexts.
To answer your question, this, when called from an onclick event handler is executed by the global context.
In languages like Ruby or Java, this (or in case of Ruby self) will always point to the object in which your method is defined. So in Ruby if you are working on the foo method inside the Bar class, self will always point to the object which is the instance of the Bar class.
JavaScript works quite surprisingly here. Because in JavaScript function context is defined while calling the function, not while defining it! This is what can surprise many when coming to JS from different fields. Such late binding is a powerful mechanism which allows us to re-use loosely coupled functions in variety of contexts.
To answer your question, this, when called from an onclick event handler is executed by the global context.
in my opinion it is because you did not pass your button to your function like this :
<input type="button" value="mybutton1" onclick="dosomething(this.value)">
while your code is like this:
<button id="bar" onclick="foo()">Button</button>
and the entry of your function is empty:
<script type="text/javascript">
function foo() {
console.log(this);
}
</script>
so you should pass this to your function like this:
<script type="text/javascript">
function foo(e) {
console.log(e);
}
</script>
and because the value of this is not set by the call, this will default to the global object , which is window in a browser.
for more info please check this out.
Use event.target.value inside your function call
When function gets called event object is passed to the function. event.target identifies which element called the function.
function getvalue() {
console.log(event.target.value);
}<input type="text" onclick="getvalue()" value="asdf"></input>
<input type="text" onclick="getvalue()" value="asdf2"></input>
<input type="text" onclick="getvalue()" value="asdf3"></input>function getvalue(t) {
console.log(t.value);
}<input onclick="getvalue(this)" value="asdf"></input>
<input onclick="getvalue(this)" value="asdf2"></input>Try this.
<input type='button' value='Generate' onclick='f1(this)' />
Now alert like
function f1(objButton){
alert(objButton.value);
}
P.S: val() is actually a jQuery implementation of value
Or you do this:
<button id='button' value='Generate' onclick='f1()'>Generate</button>
Then this for javascript:
Const click = document.getElementById('button')
Function f1{
Alert(`${click.Value}`)
}
In the case you are asking about, this represents the HTML DOM element.
So it would be the <a> element that was clicked on.
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.)
You can pass the value to the function using this.value, where this points to the button
<input type="button" value="mybutton1" onclick="dosomething(this.value)">
And then access that value in the function
function dosomething(val){
console.log(val);
}
Maybe you can take a look at closure in JavaScript. Here is a working solution:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
<p class="button">Button 0</p>
<p class="button">Button 1</p>
<p class="button">Button 2</p>
<script>
var buttons = document.getElementsByClassName('button');
for (var i=0 ; i < buttons.length ; i++){
(function(index){
buttons[index].onclick = function(){
alert("I am button " + index);
};
})(i)
}
</script>
</body>
</html>The code that you have would work, but is executed from the global context, which means that this refers to the global object.
<script type="text/javascript">
var foo = function(param) {
param.innerHTML = "Not a button";
};
</script>
<button onclick="foo(this)" id="bar">Button</button>
You can also use the non-inline alternative, which attached to and executed from the specific element context which allows you to access the element from this.
<script type="text/javascript">
document.getElementById('bar').onclick = function() {
this.innerHTML = "Not a button";
};
</script>
<button id="bar">Button</button>
You can always call funciton differently: foo.call(this); in this way you will be able to use this context inside the function.
Example:
<button onclick="foo.call(this)" id="bar">Button</button>
var foo = function()
{
this.innerHTML = "Not a button";
};