JS外部函数在HTML页面中不可见

时间:2018-07-23 09:17:54

标签: javascript html function reference

我对JS函数有问题。 我在其他名为index.js的文件中编写了函数,但在index.hmtl中,当我使用类似“ onclick = function()”的文件时,该文件无法识别该函数

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link href="{{asset('css/bootstrap/bootstrap.css')}}" rel="stylesheet">
    <link href="{{asset('css/index.css')}}" rel="stylesheet">

    <title>Sicurezza del Visitatore</title>
</head>
<body>

    <div class="container">

        <div class="row">
            <div class="col-md-12">
                <div class="card card-body" id="cardTitle">

                    <div class="row">
                        <div class="col-md-8 offset-md-2 text-center">
                            <h6>Registrazione dati preliminare all'accesso agli Stabilimenti delle Società:</h6>
                        </div>
                    </div>
                    <br>

                    <div class="row">
                        <div class="col-md-8 offset-md-2 text-center">
                            <h3>BROVEDANI GROUP SpA</h3>
                            <h3>BROVEDANI SpA</h3>
                        </div>
                    </div>
                    <br>

                    <div class="row">
                        <div class="col-md-8 offset-md-2 text-center">
                            <h6>Scheda Registrazione finalizzata alla Sicurezza del Visitatore</h6>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card card-body">
                    <nav class="navbar navbar-expand-lg navbar-light">
                        <a class="navbar-brand" href="#">Menu</a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>

                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto">
                                <li class="nav-item active">
                                    <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="/open">Visite in corso</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="/closed">Visite concluse</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card card-body" id="cardContent">

                    <div class="row">
                        <div class="col-md-8 offset-md-2 text-center">
                            <h3>Inserimento nuova visita</h3>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 offset-md-3">
                            <form>
                                <br>
                                <div class="form-group row">
                                    <label class="col-sm-4">Giorno: </label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="date" name="date" readonly>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" >Addetto:</label>
                                    <select class="col-sm-8 form-control" required id="newAddetto_registrazione" name="newAddetto_registrazione">
                                        @foreach($addetti_reg as $addetto_reg)
                                            <option value="{{$addetto_reg->id}}">{{$addetto_reg->cognome}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label">Cognome:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="newCognome" name="newCognome" required autocomplete="off">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label">Nome:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="newNome" name="newNome" required autocomplete="off">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label">Società:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="newSocieta" name="newSocieta" autocomplete="off">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label">Accesso al Plant:</label>
                                    <div class="col-sm-8">
                                        @foreach($plants as $plant)
                                            <input type="checkbox" value="{{$plant->nome}}" name="newPlants[]" id="newPlants[]">
                                            <label>{{$plant->nome}}&nbsp;&nbsp;&nbsp;</label>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label">N°Badge:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="newBadge" name="newBadge" required autocomplete="off">
                                        <p id="errorBadge" style="color: red; font-style: italic; display: none">Badge in uso</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 text-center">
                             <!--HERE-->           <button id="btnAggiungi" class="btn btn-dark" onsubmit="return checkBadge()">Aggiungi</button>
                                    </div>
                                </div>
                                {{ csrf_field() }}
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <script src="{{asset('js/jquery/jquery-3.3.1.js')}}"></script>
    <script src="{{asset('js/bootstrap/bootstrap.js')}}"></script>
    <script src="{{asset('js/index.js')}}"></script>

</body>

JS
$().ready(function ()
{
/*
$("#newCognome").keyup(function ()
{
    var cognome = $("#newCognome").val();

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax
    ({
        type: "post",
        url: "/cerca",
        data:
            {
                cognome: cognome
            },

        success: function (data) {
           if(data==null)
           {

           }
           else
           {
               $("#newNome").val(data.msg.nome);
           }
        },

        error: function () {
            alert("chiamata fallita");
        }

    });
});*/

/*
$("#newBadge").keyup( function ()
{
    var badge = $("#newBadge").val();

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax
    ({
        type: "post",
        url: "/badgevalido",
        data:
            {
                badge: badge
            },

        success: function (data) {

            if(data.msg === "true")
            {}
            else if(data.msg === "false")
            {
                alert("Badge in uso");
            }
        },

        error: function () {
            alert("chiamata fallita");
        }

    });

});*/


getDate();


function getDate()
{
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!

    var yyyy = today.getFullYear();
    if(dd<10){
        dd='0'+dd;
    }
    if(mm<10){
        mm='0'+mm;
    }
    var today = dd+'/'+mm+'/'+yyyy;
    document.getElementById("date").value = today;
    document.getElementById("day").value = today;
}

$("#btnAggiungi").click(function ()
{
    checkBadge();

});


function checkBadge()
{
    var badge = $("#newBadge").val();

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax
    ({
        type: "post",
        url: "/badgevalido",
        data:
            {
                badge: badge
            },

        success: function (data) {

            if(data.msg === "true")
            {}
            else if(data.msg === "false")
            {
                $("#errorBadge").css("display","initial");
            }
        },

        error: function () {
            alert("chiamata fallita");
        }

    });


}




});

我希望HTML中的功能checkBadge()引用JS外部文件,我该怎么做? 我希望HTML中的功能checkBadge()引用JS外部文件,我该怎么做? 我希望HTML中的功能checkBadge()引用JS外部文件,我该怎么做? 我希望HTML中的功能checkBadge()引用JS外部文件,我该怎么做?

我希望HTML中的功能checkBadge()引用JS外部文件,我该怎么做?

1 个答案:

答案 0 :(得分:0)

函数声明在当前作用域中创建变量 ,这是您传递给ready()的匿名函数。

该变量(包含函数)在所述匿名函数之外不可用。

可以将函数移到外部以使其成为全局函数,然后从您的onclick属性进行访问,但是:

  • 全球形势糟糕
  • onclick属性很糟糕

使用jQuery's on绑定事件处理程序,而不使用onclick属性。