JS External Functions are not visible in HTML page

Question

I have a problem with JS functions. I wrote functions in other file named index.js but in index.hmtl when i use like "onclick = function()" the file doesn't recognize the 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");
        }

    });


}




});

I want that the function checkBadge() in HTML referes to JS external file how i can do this? I want that the function checkBadge() in HTML referes to JS external file how i can do this? I want that the function checkBadge() in HTML referes to JS external file how i can do this? I want that the function checkBadge() in HTML referes to JS external file how i can do this?

I want that the function checkBadge() in HTML referes to JS external file how i can do this?

Please check https://stackoverflow.com/help/how-to-ask, more specifically the paragraph `Help others reproduce the problem` — Chris Satchell, Jul 23 '18 at 09:20
Please refer to this answer on a similar question: https://stackoverflow.com/a/13739595/2830652 Basically if this is plain old HTML and javascript you need to explicitly connect your javascript file to your HTML one — sokkyoku, Jul 23 '18 at 09:21
Given that you've included it already, we need to see more of your code and get more details to help you, please refer to @ChrisSatchell 's comment above — sokkyoku, Jul 23 '18 at 09:22
Hello and welcome to Stack Overflow :). You said that you included your file in your HTML. Can you show us your code? That would make it a lot easier to help you. Thanks! — CodeF0x, Jul 23 '18 at 09:24
I'm not practics with StackOverflow, sorry for the repetition but i don't know what say more.. — Bryan Del Bianco, Jul 23 '18 at 09:45

score 0 · Answer 1 · answered Jul 23 '18 at 09:48

A function declaration creates a variable in the current scope, which is the anonymous function you pass to ready().

That variable (holding the function) is not available outside said anonymous function.

You could move the function outside to make it a global and then access from your onclick attribute but:

Globals are awful
onclick attributes are awful

Bind the event handler with jQuery's on instead of using an onclick attribute.

JS External Functions are not visible in HTML page

1 Answers1