CODEWITHSUNDEEP
javascript
AndreS
AndreS

Reputation: 1

JS: ReferenceError: function is not defined

When my HTML file is loaded, it automatically shows a "login window" (see the function draw_login). When I click on the generated button I get the following error:

ReferenceError: emit_login is not defined

window.onload = function() {

    var socket = io();
    draw_login ();

    function emit_login() {
        var login_name      = document.getElementById("login_name").value;
        var login_password  = document.getElementById("login_password").value;
        socket.emit('login', {
            name:"",
            pw:""       
        });
    }
    function draw_login() {
        document.getElementById("status_bar").innerHTML = 
            'Name:<input type="text" id="login_name"></input><br>'+
            'Password:<input type="password" id="login_password"></input><br>'+
            '<button type="button" onclick="emit_login();">login</button>';
    }
}

Has anyone an idea or some suggestions? Thanks in advance!

Upvotes: 0

Views: 2090

Answers (3)

dannyjolie
dannyjolie

Reputation: 11369

Keeping things out of the global scope is a good thing, but when you combine it with inline eventlisteners, e.g onclick="emit_login()" it just doesn't work.

Instead of having an inline eventlistener, you can do something like this in draw_login:

function draw_login() {
    document.getElementById("status_bar").innerHTML = 
        'Name:<input type="text" id="login_name"></input><br>'+
        'Password:<input type="password" id="login_password"></input><br>'+
        '<button type="button">login</button>';

    document
        .querySelector('#status_bar button')
        .addEventListener('click', emit_login, false);
}

Update: The whole point being that using the onclick attribute is discouraged, and definitely not one of the good parts of javascript.

Upvotes: 0

Ja Superior
Ja Superior

Reputation: 469

It looks like you are receiving this error because you have the emit_login function being called from your click handler which does not share the same scope as the function being called in your onload.

https://jsfiddle.net/sL7e5cut/

function emit_login() {
    var login_name      = document.getElementById("login_name").value;
    var login_password  = document.getElementById("login_password").value;
    alert('login', {
        name:"",
        pw:""       
    });
}
(function() {

    draw_login ();


    function draw_login() {
      document.body.innerHTML = 
        'Name:<input type="text" id="login_name"></input><br>'+
        'Password:<input type="password" id="login_password"></input><br>'+
        '<button type="button" onclick="emit_login();">login</button>';
      }
}())

try defining the emit_login function outside the onload handler, and everything should work fine.

Upvotes: 0

Fredrik
Fredrik

Reputation: 1031

As Daniel A. White said;

Move it outside of the onload function.

And as Amit said, if you want to learn about why you need to do this, you should read about scopes in JavaScript as this is what causes your error. The function emit_login is created inside of the anonymous function window.onload, which means that anything outside of window.onload will not have access to anything outside of this.

Please correct me if I said anything wrong here. Haven't used JS for quite some time.

Upvotes: 2

Related Questions