Frame 11.jpg

1. プログラムを動かすタイミングを変える

現時点では、ページが読み込まれた時点で票数が1票になるだけで、「投票する」ボタンの意味があまりありません。

せっかくの「投票する」ボタンを活かすために、ユーザー操作に合わせてプログラムを動かすタイミングを変える方法を学んでいきましょう!

Frame 15.jpg

イベントを使うと、プログラムの動くタイミングを人間の動作・操作に合わせて設定することができます!

$('#btn').on('click', function(){
    //clickされたときに行いたいプログラムを実行する
    // クリックされたときはfunctionの{から}の間が実行されます
});

イベントには以下のようなものがあります。全て、人間がデバイスに対して行う操作であることがわかりますよね!

<aside> 💡 現時点で、ボタンを押したら必ず表示される票数が1になればOKです!

</aside>

2. データの取得と変数・計算

次に、投票するボタンを押したらしっかりと1→2と、1票ずつ票数が加算されていくようにしましょう!

demo.jpg