simple.html
<!doctype html>
<html>
<head>
<script src="simple.js"></script>
</head>
<body>
<form>
<input type="button" id="click_on_me" value="Click me">
</form>
</body>
</html>
and simple.js
class SimpleClass
{
constructor()
{
this.buttoncalcElement = document.getElementById("click_on_me");
this.buttoncalcElement.onclick = this.buttonClick_Handler;
}
buttonClick_Handler()
{
alert("hi babes");
this.calcSomething();
}
calcSomething()
{
alert("bye babes");
}
}
window.onload = function()
{
simpleObject = new SimpleClass();
simpleObject.calcSomething();
}
Loading the page, window.onload it gets into calcSomething and show me the alert, but when I click the button, it gets into the buttonClick_Handler, but executing this.calcSomething(); call, the console tells me
this.calcSomething is not a function. (In 'this.calcSomething()', this.calcSomething' is undefined)
Anyone any idea?