Cannot access previously set variable on class with onclick function

Question

So I'm trying to keep my javascript project organised by using classes and an init function, now I'm having this weird problem I never have experienced before. This is my code:

class App {
    constructor() {
        this._username;
    }

    authenticate() {
        this._username = "test";
    }

    submitForm() {
        console.log(this._username);
    }
}

const init = function () {
    const app = new App();

    document.getElementById("authenticationVerify").onclick = app.authenticate;
    document.getElementById("btnSendSMS").onclick = app.submitForm;
}

window.onload = init;

And HTML (simplified)

<body>
    <main>
        <form id="formSendSMS">
            <input type="button" name="send" id="btnSendSMS" value="Versturen">
        </form>

        <div id="authentication-prompt">
            <form>
                <input type="button" name="login" id="authenticationVerify" value="Log in" class="button blue">
            </form>
        </div>
    </main>
    <script src="js/mainBack.js" type="text/javascript"></script>
</body>

</html>

As you can see in the console, I get "undefined" when I activate the second button press, but I really don't know why this is happening, since the 'app' is not getting redeclared.

Kind regards, Jasper

can you please share HTML code?

aaandri98
– aaandri98

2021-07-26 13:42:21 +00:00
Commented Jul 26, 2021 at 13:42 — aaandri98
– aaandri98, Commented Jul 26, 2021 at 13:42
Does matter that much I think, but yea comming up

Jasper B
– Jasper B

2021-07-26 13:49:45 +00:00
Commented Jul 26, 2021 at 13:49 — Jasper B
– Jasper B, Commented Jul 26, 2021 at 13:49

kalle · Accepted Answer · 2021-07-26 13:56:33Z

1

That is not a proper way to catch click event. From your js code, I have succeeded to make a working example.

Also, JS functions cant be called without parentheses. A great example is given here.

class App {
    constructor() {
        this._username;
    }

    authenticate() {
        this._username = "test";
    }

    submitForm() {
        console.log(this._username);
    }
}

const init = function () {
    const app = new App();

 
    document.getElementById("authenticationVerify").onclick = function(e){app.authenticate()};
    document.getElementById("btnSendSMS").onclick = function(e){app.submitForm()};
}


window.onload = init;

<button id="authenticationVerify">AUTH</button>
<button id="btnSendSMS">SMS</button>

answered Jul 26, 2021 at 13:56

kalle

1391 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jasper B Over a year ago

Yea I just figured it out that I shouldn't directly call the app function from the onclick function from the button. Thanks for the help. And PS: I used method refrence to link the method that's why there aren't any parentheses

Collectives™ on Stack Overflow

Cannot access previously set variable on class with onclick function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related