javascriptでボタンが押されるたびに何度も処理を実行させたい

Question

初心者です。javascript/phpを用いて、ボタンが押されると現在時刻を取得・表示し、その後そのボタンが押されるたびに時刻取得、表示の更新を行うプログラムを作ろうとしています。

発生している問題・エラーメッセージ

ボタンを一度押すと、scriptタグ部分が現在時刻に置き換わってしまい、二度目以降クリックしても何も起きない。

該当のソースコード

 <button>更新</button>
 <p>
 <script>
      $('button').on('click' , function() {
         <?php
         $nowtime = date("Y/m/d H:i:s");
         ?>
         $(this).next().text('<?php echo $nowtime;?>');
      });
 </script>
 </p>

まだ始めたばかりでこの方法を取ることがあっているのかすら自信がありません。ご教示ください。

追記：phpの仕様自体を勘違いしてました。javascriptでやる方向で調べてみます。

Answer 1

ボタンを一度押すと、scriptタグ部分が現在時刻に置き換わってしまい

開発者ツールで確認してみると分かると思いますが、ボタンを押す前には書き換わっていると思います。

これは、javascriptの実行途中でphpを処理するのではなく、全てのphpの処理を行なってからブラウザに出力され、そこからjavascriptが実行されるからです。
（詳しく言えば、phpはサーバーサイドで実行され、javascriptはクライアントサイドで実行されます）

そのため、今回のようにリアルタイムで現在時刻を取得・表示するためには、全てjavascriptで記述する必要があります。
（ajax等を使いphp側にアクセスして現在時刻を取得する方法もありますが、コードが複雑になる上にタイムラグが生じればリアルタイムでなくなるので普通は取りませんが）

Comments

[AlphaA]

迅速な回答ありがとうございます。PHPの仕様を勘違いしていました。全てjavascriptで書く方向でもう一度挑戦してみます。

Answer 2

• 新しい時間をjsでローカルPCからもらう
• サーバーからもらうならAPIを用意しXHR(ajax/fetch)で受け取る

のどちらかです