Javascript onclick Funktion html

-1

Ich versuche, einige öffentliche git anzupassen, und weil ich ein Noob in Jquery/Javascript bin Ich weiß nicht, wie man eine onclick-Funktion ordnungsgemäß an die Schaltfläche binden, so dass es wissen, wie getStates aufrufen() Funktion. Ja, ich weiß, dass ich einfach $(function(){ entfernen könnte und es würde funktionieren, aber ich möchte es in jquery Funktion aufrufen können?Javascript onclick Funktion html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>US Hospitals</title> 
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 
<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'> 
</script> 
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' /> 
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="/lib/neo4j-web.min.js"></script> 
</head> 
<body> 
<div id="desc"> 
    <div class="row top-row"> 
     <div class="col-xs-6"> 
      <h3 class="heading">US Hospitals</h3> 
     </div> 
     <div class="col-xs-6"> 
      <p class="lead"></p> 
     </div> 
     <button onclick="$.getStates();">Load States!</button> 
    </div> 
</div> 
<div id='map'></div> 
<script> 
$(function(){ 

    function getStates() {  
     session 
      .run(districtQuery) 
      .then(function(result){ 
       result.records.forEach(function(record) { 
        drawPolygons(parseWKTPolygons(record.get("wkt")), 
record.get("text")); 

       }); 
      }) 
    } 
</script> 
</body> 
</html>

Ich erhalte die Fehlermeldung, dass:

Uncaught TypeError: $.getStates is not a function at HTMLButtonElement.onclick (index.html:51)

Quelle

2017-04-07 Tomaž Bratanič

weil jquery keine getStates-Methode hat. Einpacken in ein Dokument. Das macht das nicht. Löschen Sie den document.ready-Code und ändern Sie den Klick, um die Methode aufzurufen. – epascarello

Sie könnten eine ID der Schaltfläche hinzuzufügen und so etwas wie folgt zu verwenden:

<button id="load-states">Load States!</button>

Javascript:

$(function() { 
    function getStates() { 
    session 
     .run(districtQuery) 
     .then(function(result){ 
      result.records.forEach(function(record) { 
       drawPolygons(parseWKTPolygons(record.get("wkt")),record.get("text")); 
      }); 
     }) 
    } 
// Adding event onClick to button 
$('#load-states').on('click', getStates);        

});

Quelle

2017-04-07 22:39:04 daronwolff

Sie können die Funktion global machen:

window.getStates = function getStates() { 
    ... 
};

Dann können Sie einfach getStates() im Attribut onclick verwenden.

Natürlich wäre die sauberere Möglichkeit, das Ereignis von JavaScript selbst zu binden, mit jQuery $.click(). Dies würde erfordern, dass Sie dem Button-Tag ein id-Attribut hinzufügen oder eine andere Möglichkeit, es aus jQuery zu identifizieren.

Quelle

2017-04-07 22:25:40 itdoesntwork

Nehmen Sie die Funktion aus $(function() { ... }) heraus, da die von onclick aufgerufenen Funktionen im globalen Gültigkeitsbereich sein müssen. Und nennen Sie es wie getStates(), nicht $.getStates()

<script> 
function getStates() {  
    session 
     .run(districtQuery) 
     .then(function(result){ 
      result.records.forEach(function(record) { 
       drawPolygons(parseWKTPolygons(record.get("wkt")), 
       record.get("text")); 
      }); 
     }) 
} 
</script>

Quelle

2017-04-07 22:26:49 Barmar

$(function() { })

Dies ist dem Interpreter mitteilen, dass er JavaScript/jQuery-Code ausführen soll, sobald die Seite fertig ist. Dies wird üblicherweise als onready Funktion bezeichnet. Normalerweise werden hier keine anderen Funktionen erstellt.

Entfernen:

$(function() { })

Auch die Art und Weise Sie das Onclick-Ereignis erstellen, ist falsch. Verwenden Sie getStates() statt $.getStates()

Also alles in allem sollten Sie den Code wie folgt geändert werden:

<button onclick="getStates();">Load States!</button> 

<script> 
function getStates() {  
    session 
     .run(districtQuery) 
     .then(function(result){ 
      result.records.forEach(function(record) 
      { 
       drawPolygons(parseWKTPolygons(record.get("wkt")), 
       record.get("text")); 

      }); 
     }); 
} 
</script>

Eine weitere Möglichkeit, es beheben könnte, ist Ihre onready Funktion zu verlassen und das Click-Ereignis innerhalb erstellen. Ihre Funktion "getStates()" muss jedoch weiterhin außerhalb der Funktion "onready" platziert werden, und Sie würden onclick aus dem Schaltflächenelement entfernen.

Zum Beispiel:

<button>Load States!</button> 

<script> 
$(function() { 
    $('button').click(function() { 
     getStates(); 
    }); 
}); 

function getStates() {  
    session 
     .run(districtQuery) 
     .then(function(result){ 
      result.records.forEach(function(record) { 
       drawPolygons(parseWKTPolygons(record.get("wkt")), 
       record.get("text")); 

      }); 
     }) 
} 
</script>

Nun, wenn Sie auf dieser Seite mehr als eine Taste haben, müssen Sie eine ID oder Klasse hinzuzufügen, sie zu unterscheiden. Dann würden Sie $('button') durch zum Beispiel ersetzen: $('#load_states_button), wenn Sie eine ID verwenden oder $('.button_class'), wenn Sie eine Klasse verwenden.

Sie alle erzeugen das gleiche Ergebnis, also ist es nur eine Frage der persönlichen Vorliebe.

Hoffe das half! Lass es mich wissen, wenn du irgendwelche Fragen hast. :)

Quelle

2017-04-07 22:42:48

Javascript onclick Funktion html

Antwort

Verwandte Themen