Wie kann ich den Text in einem Div ändern, wenn ich auf eine Schaltfläche klicke?

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 

<script> 
    $(document).ready(function() { 
    $('#getQuote').on("click", functon() { 
    $('.message').html("Here is the message"); 
    }); 
}); 

</script> 

<body> 
    <div class="container-fluid"> 
    <div class="row text-center"> 
     <h1>Random Quote Machine</h1> 
    </div> 

    <div class="row text-center"> 
     <div class="well message"> 

     The quote will go here 
     </div> 
    </div> 

    <div class="row text-center"> 
     <button id="getQuote" class="btn btn-primary">Get Quote </button> 
    </div> 
    </div> 
</body>

Hallo ich bin neu in der Programmierung und ich verwende copepen.io, um dies zu tun. Ich habe mich gefragt, warum, wenn ich auf den Button "Get Message" klicke, ändert sich die Nachricht im div nicht in die neue Nachricht. Übrigens lerne ich gerade durch freecodecamp zu coden und dieser Code hat auf der Webseite von freecodecamp funktioniert, aber nicht auf codepen. Ich frage mich, was ich falsch mache. Auf dem Codepen ist der Fehler, den ich erhalte, "Unerwarteter Token {". Jede Hilfe würde sehr geschätzt werden.Wie kann ich den Text in einem Div ändern, wenn ich auf eine Schaltfläche klicke?

Quelle

2017-02-03 Dan Ng Man

Minor Art: functon() = Funktion()

Sie haben zur Zeit einen Tippfehler, wie Sie functon statt function in Ihrem Ereignishandler verwenden, die alles andere aus syntaktisch werfen:

// Previously you had $('#getQuote').on("click",functon() { 
$('#getQuote').on("click", function() { 
    $('.message').html("Here is the message"); 
});

Doppelprüfung jQuery wird referenziert.

Wenn das das Problem nicht lösen, werden Sie sicherstellen müssen, dass jQuery vor jedem Code verweist, dass es mit:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 
<!-- Reference jQuery before any other scripts that rely on it --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
    $(document).ready(function() { 
 
    $('#getQuote').on("click", function() { 
 
     $('.message').html("Here is the message"); 
 
    }); 
 
    }); 
 
</script> 
 

 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="row text-center"> 
 
     <h1>Random Quote Machine</h1> 
 
    </div> 
 

 
    <div class="row text-center"> 
 
     <div class="well message"> 
 

 
     The quote will go here 
 
     </div> 
 
    </div> 
 

 
    <div class="row text-center"> 
 
     <button id="getQuote" class="btn btn-primary">Get Quote</button> 
 
    </div> 
 
    </div> 
 
</body>

Quelle

2017-02-03 22:49:49

Okay, so das Skript Sie verwenden jQuery. Um jQuery-Bibliothek zu aktivieren, müssen Sie es Ihren Code hinzufügen, indem Sie unten

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

, dass die jQuery-Bibliothek lädt für Sie in Ihrem Skript verwenden.

Eine andere Möglichkeit, es zu tun ist, indem Sie es herunterladen und auf seinen Pfad verweisen.

Ich habe versucht, Ihren Code auszuführen und ja, wie Rion bereits gesagt hat, verursacht Tippfehler das Problem. Ändern functon() zu function()

Es ist ein sehr häufiger Fehler, als Neuling zu machen. Mach weiter so!

Quelle

2017-02-04 00:21:59 forJ

Wie kann ich den Text in einem Div ändern, wenn ich auf eine Schaltfläche klicke?

Antwort

Verwandte Themen