Functie is niet gedefinieerd – niet-afgevangen referentiefout

Ik heb deze niet-afgevangen referentiefoutfunctie is niet gedefinieerde fout die niet begrijpt.

Als ik dat heb

$(document).ready(function(){
 function codeAddress() {
  var address = document.getElementById("formatedAddress").value;
  geocoder.geocode( { 'address': address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
   }
  });
 }
});

en

<input type="image" src="btn.png" alt="" onclick="codeAddress()" />
<input type="text" name="formatedAddress" id="formatedAddress" value="" />

Als ik op de knop druk, wordt de “unaught reference error” geretourneerd.

Maar als ik de codeAddress() buitende $(document).ready(function(){} plaats, dan werkt het prima.

Mijn bedoeling is om de codeAddress() in de document.ready.function te plaatsen.

Antwoord 1, autoriteit 100%

Hoe zit het met het verwijderen van het kenmerk onclicken het toevoegen van een ID:

<input type="image" src="btn.png" alt="" id="img-clck" />

En je script:

$(document).ready(function(){
    function codeAddress() {
        var address = document.getElementById("formatedAddress").value;
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
            }
        });
    }
    $("#img-clck").click(codeAddress);
});

Op deze manier hoeft u de html niet aan te raken als u de functienaam moet wijzigen of wat dan ook.

Antwoord 2, autoriteit 96%

Het probleem is dat codeAddress()niet genoeg bereik heeft om vanaf de knop aangeroepen te kunnen worden. Je moet het declareren buiten de callback naar ready():

function codeAddress() {
    var address = document.getElementById("formatedAddress").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
        }
    });
}
$(document).ready(function(){
    // Do stuff here, including _calling_ codeAddress(), but not _defining_ it!
});

Antwoord 3, autoriteit 58%

Uw probleem hier is dat u het bereik dat u instelt niet begrijpt.

Je geeft de functie readydoor aan een functie zelf. Binnen deze functie creëer je een andere functie genaamd codeAddress. Deze bestaat binnen het bereik dat het heeft gemaakt en niet binnen het vensterobject (waar alles en zijn oom het zou kunnen noemen).

Bijvoorbeeld:

var myfunction = function(){
    var myVar = 12345;
};
console.log(myVar); // 'undefined' - since it is within 
                    // the scope of the function only.

Kijk hier voor wat meer informatie over anonieme functies: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

Een ander ding is dat ik merk dat je jQuery op die pagina gebruikt. Dit maakt het instellen van klikhandlers veel gemakkelijker en u hoeft zich niet bezig te houden met het instellen van het ‘onclick’-attribuut in de HTML. U hoeft de methode codeAddressook niet voor iedereen beschikbaar te maken:

$(function(){
    $("#imgid").click(function(){
        var address = $("#formatedAddress").value;
        geocoder.geocode( { 'address': address}, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
             map.setCenter(results[0].geometry.location);
           }
        });
    });  
});

(U moet de bestaande onclickverwijderen en een ID toevoegen aan het afbeeldingselement dat u wilt verwerken)

Merk op dat ik $(document).ready()heb vervangen door de snelkoppeling van slechts $()(http://api.jquery.com/ready/). Vervolgens wordt de methode klikgebruikt om een klikhandler aan het element toe te wijzen. Ik heb ook je document.getElementByIdvervangen door het jQuery-object.

Antwoord 4, autoriteit 40%

Je moet die functietekst buiten de ready() schrijven;

omdat ready wordt gebruikt om een functie aan te roepen of om een functie met een binding-ID zoals deze te binden.

$(document).ready(function() {
    $("Some id/class name").click(function(){
        alert("i'm in");
    });
});

maar u kunt dit niet doen als u de “showAmount”-functie aanroept bij change/onclick-gebeurtenis

$(document).ready(function() {
    function showAmount(value){
        alert(value);
    }
});

Je moet “showAmount” schrijven buiten de ready();

function showAmount(value){
    alert(value);//will be called on event it is bind with
}
$(document).ready(function() {
    alert("will display on page load")
});

Antwoord 5, autoriteit 2%

Nog één ding. In mijn ervaring is deze fout opgetreden omdat er een andere fout was voorafgaand aan de Function is not defined - uncaught referenceerror.

Dus, kijk door de console om te zien of er een eerdere fout bestaat en zo ja, corrigeer de bestaande. Misschien heb je geluk dat zij het probleem waren.

Antwoord 6, autoriteit 2%

Met het wissen van de cache is het probleem voor mij opgelost of je kunt het in een andere browser openen

index.js

function myFun() {
    $('h2').html("H999999");
}

index.jsp

<html>
<head>
    <title>Reader</title>
</head>
<body>
<h2>${message}</h2>
<button id="hi" onclick="myFun();" type="submit">Hi</button>
</body>
</html>

Antwoord 7

Controleer of je js-referenties correct hebt opgegeven. JQuery-bestanden eerst en vervolgens uw aangepaste bestanden. Aangezien u ‘$’ gebruikt in uw js-methoden.

Antwoord 8

Ik dacht dat ik dit zou vermelden omdat het even duurde voordat ik dit probleem had opgelost en ik het antwoord nergens op SO kon vinden. De code waaraan ik werkte werkte voor een collega, maar niet voor mij (ik kreeg dezelfde fout). Het werkte voor mij in Chrome, maar niet in Edge.

Ik heb het werkend gekregen door de cache in Edge te wissen.

Dit is misschien niet het antwoord op deze specifieke vraag, maar ik dacht dat ik het zou noemen voor het geval het iemand anders een beetje tijd bespaart.