Невозможно вызвать функцию из тела onload (неперехваченная ошибка ссылки: resetLoginForm не определен) javascript

Question

У меня есть тело, вызывающее функцию в javascript. Я много чего пробовал, но консоль просто выводит в журнал ошибок:

неперехваченная ошибка ссылки: resetLoginForm не определен

Мой код:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/html">

    <head>

        <title>Login Page</title>

        <script src="/client/js/popper.min.js"></script>
        <script src="/client/js/js.cookie.min.js"></script>
        <script src="/client/js/querystring.js"></script>
        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"  media="screen,projection"/>
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <script type="module" src="js/login.js"></script>

    </head>

    <body class="blue-grey darken-2" onload="resetLoginForm()">

        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Это код JavaScript, который я пытаюсь использовать:

import * as Cookies from "/client/js/js.cookie.min.js";

function resetLoginForm() {

    if (Cookies.get("destination") === undefined) {
        window.location.href = "/client/index.html";
    }

    const loginForm = $('#loginForm');
    loginForm.submit(event => {
        event.preventDefault();
        $.ajax({
            url: '/admin/login',
            type: 'POST',
            data: loginForm.serialize(),
            success: response => {
                if (response.startsWith('Error:')) {
                    alert(response);
                } else {
                    Cookies.set("sessionToken", response);
                    window.location.href = Cookies.get("destination");
                }
            }
        });
    });

javascript html

0

Marley Powell 23 Окт 2018 в 16:51

Answer 1

Вы используете новые модули ECMAScript (<script type="module" ...>), которые изолированы от своей собственной области видимости. Ваша функция resetLoginForm() не определена в глобальной области (где вы, по сути, можете вызвать ее из своей функции тела onload). Вам нужно явно определить его в своем модуле:

import * as Cookies from "/client/js/js.cookie.min.js";

window.resetLoginForm = {

    if (Cookies.get("destination") === undefined) {
        window.location.href = "/client/index.html";
    }
    ...

Однако в идеале вам вообще не следует использовать onload. Просто добавьте слушателя событий в:

import * as Cookies from "/client/js/js.cookie.min.js";

function resetLoginForm() {

    if (Cookies.get("destination") === undefined) {
        window.location.href = "/client/index.html";
    }

    ...
}

// Attach an event, and call resetLoginForm when the document is done loading.
document.addEventListener("DOMContentLoaded", resetLoginForm);

2

Goodbye StackExchange 23 Окт 2018 в 14:00

Answer 2

Изменение: <script type="text/javascript" src="js/login.js"></script>
Изменения: проверьте один раз функцию resetLoginForm при загрузке.

0

Ravi Chauhan 23 Окт 2018 в 14:01

Невозможно вызвать функцию из тела onload (неперехваченная ошибка ссылки: resetLoginForm не определен) javascript

2 ответа

Похожие вопросы

Новые вопросы

javascript