Question

加载我的HTML文件后，它会自动显示“登录窗口”（请参阅函数doubleList :: [Integer] -> [Integer] doubleList list = case list of [] -> [] (x:xs) -> x*2:list xs）。当我点击生成的按钮时，我收到以下错误：

ReferenceError：未定义emit_login

draw_login

有人有想法或一些建议吗？提前谢谢！

Answer 1

正如Daniel A. White所说;

将其移出onload功能。

正如Amit所说，如果你想了解为什么需要这样做，你应该阅读JavaScript中的范围，因为这是导致错误的原因。函数emit_login是在匿名函数window.onload内创建的，这意味着window.onload之外的任何内容都无法访问此外的任何内容。

如果我在这里说错了，请纠正我。 Haven在很长一段时间内都没有使用过JS。

Answer 2

看起来您收到此错误是因为您从单击处理程序调用emit_login函数，该函数与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>';
      }
}())

尝试在onload处理程序之外定义emit_login函数，一切都应该正常工作。

Answer 3

将事物排除在全局范围之外是一件好事，但是当您将其与内联事件侦察器结合使用时，例如onclick="emit_login()"它就不起作用。

您可以在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);
}

更新：重点是不鼓励使用onclick属性，并且绝对不是javascript的优点之一。

JS：ReferenceError：函数未定义

3 个答案: