ボタンをクリックしたときにdiv内のテキストを変更する方法はありますか？

<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>

こんにちは私はプログラミングには新しいので、これを行うにはcodepen.ioを使用しています。私はなぜボタンをクリックして "メッセージを取得する" divのメッセージが新しいメッセージに変更されないのだろうかと思っていた。ところで、私はfreecodecampを使ってコードを書くことを学んでいます。このコードはfreecodecampのウェブサイトではなく、codepenで動作しました。私は何が間違っているのだろうと思っています。 codepenで、私が得るエラーは "Unexpected Token {"です。どんな助けでも大歓迎です。ボタンをクリックしたときにdiv内のテキストを変更する方法はありますか？

出典

2017-02-03 Dan Ng Man

マイナータイプ：！functon（）=関数（）

あなたがfunctonの代わりに、構文的に他のすべてをオフにスローされますあなたのイベントハンドラ、中function使用しているとあなたは現在、タイプミスがあります

を

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

ダブルチェックjQueryが参照されています。

ことで問題が解決しない場合、あなたはjQueryの任意のコードの前に参照されていることを確認する必要がありますこと、それを使用している：スクリプトはそう

<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>

出典

2017-02-03 22:49:49

オーケーあなたが使用しているのはjQueryです。 jQueryライブラリを有効にするには、あなたはあなたのスクリプトで使用するためにjQueryライブラリをロードすることを

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

の下に追加することによって、あなたのコードに追加する必要があります。

もう1つの方法は、ダウンロードしてそのパスを参照することです。

私はあなたのコードを実行しようとしましたが、Rionは既にタイプミスが原因で問題が発生していると言います。変更functon()をfunction()

初心者で作るのは非常に間違いです。良い仕事を続けてください！

出典

2017-02-04 00:21:59 forJ

ボタンをクリックしたときにdiv内のテキストを変更する方法はありますか？

答えて

関連する問題