javascript - onsubmit 函数未定义

Question

为什么它说我还没有定义我的函数？是因为我已将函数放置在文档就绪函数中吗？ - 也许我必须提到，如果我的陈述不正确，我想使用此功能来阻止提交。

我的 html 表单标签:

<form class="text-left" method="post" action="" onsubmit="return myFunction();">

下面是脚本(该脚本位于我的头部部分):

$( document ).ready(function() {

    //the number generators and sum of the two numbers
    var numberOne = Math.floor((Math.random() * 10) + 1); 
    var numberTwo = Math.floor((Math.random() * 10) + 1);
    var sum = numberOne + numberTwo;

    //write the math question to the div
    document.getElementById("captchaOutput").innerHTML = numberOne+ " og " +numberTwo;
    //alert(sum);

    function myFunction(){
        var humanInput = $('#captchaInput').val();

        if(humanInput == sum){

            $("#captcha_service_err").css("display", "inline")
            $("#captchaInput").css("border-color", "red");
             return false;
        }
             $("#captcha_service_err").css("display", "none")
        $("#captchaInput").css("border-color", "");
        return true;       
    }  
});

Answer 1

it because i have placed my function inside a document ready function?

是的。函数声明(如 var 语句)的作用域为它们在其中声明的函数。

<小时/>

如果您想将 myFunction 用作全局函数，则将其及其依赖的变量移出您使用 in 声明的匿名函数。

<小时/>

或者，您可以显式创建一个引用它的全局:

window.myFunction = myFunction

<小时/>

但是，最好的解决方案是首先不要使用全局变量。

删除 onsubmit 属性并使用 JavaScript 绑定(bind)事件处理程序。

$('form').on('submit', myFunction);

确保捕获事件对象:

function myFunction(e){

如果您不希望表单提交，则阻止默认的表单提交行为:

$("#captchaInput").css("border-color", "red");
e.preventDefault();