Schwierigkeiten mit der Knopf-Funktionalität

Question

Guten Tag,

Ich arbeite durch freecodecamp und beschäftige mich zurzeit mit dem Zitatgeneratorproblem. Ich bin in ein kleines Problem geraten, als ich die Funktionalität für das Scripting einer Änderung erhalten habe, wenn ich auf die Schaltfläche geklickt habe. Im Grunde habe ich meinen eigenen Code, den ich unten posten werde, aber ich versuche auch einfach, den Code von ihnen zu kopieren und einzufügen. Ich bin immer noch nicht in der Lage Funktionalität in meinem Button zu bekommen.

Ich bin mir sicher, dass es ein ehrlicher und leichter Fehler ist, aber hoffentlich sollte das die Lösung erleichtern. Lass es mich wissen, wenn du Fragen hast und ich es wirklich schätze!

(bitte beachten Sie, ich möchte einfach die Nachrichtenanzeige ändern Sie die Taste beim Klicken)

<script> 
    $(document).ready(function(){ 
    $("#getMessage").on("click", function(){ 
     $(".message").html("New Message"); 
    }); 
    }); 
</script> 

<div id="wrapper"> 
    <button type="button" id = "getMessage" class = "btn btn- primary">Generate New Quote</button> 
</div> 

<div class= "text-center"> 
    <div class = "message"> 
    Sample 
    </div> 
</div> 

Answer 1

Wie die anderen erwähnt haben, sind Sie höchstwahrscheinlich nicht das Hinzufügen jQuery, aber Sie versuchen, es zu benutzen ($). Um dies zu überprüfen, überprüfen Sie Ihre Konsole. Es ist wahrscheinlich mit Uncaught ReferenceError: $ is not defined gefüllt.

Angenommen, Sie verwenden CodePen wie die challenege sagt in der Zielsetzung, können Sie sehr schnell und einfach jQuery enthalten. Klicken Sie dazu einfach neben JS auf die settings cog, wählen Sie Quick-add aus und wählen Sie jQuery.

Wenn Sie es manuell hinzufügen möchten (wie Sie wahrscheinlich in Zukunft Entwicklung haben werden) empfehle ich Drefetr's answer.

Answer 2

Es scheint keine großen Probleme mit dem Code zu sein (in Bezug auf die Logik, kann der Editor haben hat deine Formatierung ein wenig übel gemacht).

Können Sie bestätigen, dass Sie die jQuery-Bibliotheken in die Kopfzeile Ihres HTML-Dokuments eingefügt haben? z.B.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

Für weitere Informationen: https://developers.google.com/speed/libraries/#jquery