JS: ReferenceError: function is not defined

Question

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!

@Amit My bad, I didn't see that the button generated from draw_login calls the emit_login function. — Fredrik
– Fredrik, Commented Mar 13, 2016 at 0:02

Fredrik · Accepted Answer · 2016-03-13 00:06:13Z

2

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.

answered Mar 13, 2016 at 0:06

Fredrik

1,0519 silver badges24 bronze badges

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

Comments

Ja Superior · Accepted Answer · 2016-03-13 00:10:52Z

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.

dannyjolie · Accepted Answer · 2016-03-13 00:29:54Z

0

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.

edited Mar 13, 2016 at 0:29

answered Mar 13, 2016 at 0:18

dannyjolie

11.4k3 gold badges35 silver badges28 bronze badges

Collectives™ on Stack Overflow

JS: ReferenceError: function is not defined

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related