phpでデータベースから取得した値を使って、jqueryで計算結果を表示させたい

###自己紹介

初心者です！
phpとphpmyadminとjquery(ほんの少し)でwebアプリケーションを作っています

###現在、取り組んでいること　と　実現したいこと
phpファイルの中で、収入と支出を入力するフォームを作成しています。
入力欄の下に、計算ボタンを押したら計算結果が表示される、というものをjqueryで作って設置しています。

単純に、フォームに入力したものであれば、問題なく表示されるのですが、
そうではなくて、
phpファイルで、SQL の SELECT によりデータベースから取得した値を収入の値として表示させ、支出フォームに数字を入力して、
収入の値から支出の値を引いた数値をjqueryを使って表示させたいと思っています。

###試したこと

phpファイル

■収入

//収入の値をデータペースから取得する
//テーブル名：income 
//カラム名：amount_1

<?php
  　　try{
          $dbh = new PDO($dsn, $user, $password);
          $sql = " SELECT amount_1 FROM income WHERE student_id = :student_id ";
          $stmt = $dbh->prepare($sql);
          $stmt->bindValue(':student_id', $student_id);
          $stmt->execute();
          $data = $stmt->fetch();

        }catch(PDOException $e){
          echo $e->getMessage();
          exit;
        }

    ?>


//SELECTで取得した値をechoで表示する
//<?php ?>を、spanタグで囲み jsファイルで指定するためにidを付与する
//idは、amount_1


<tr>
  <td class = "align-middle"  align = "center" colspan = "2">
    <span id ="amount_1"><?php echo $data['amount_1'] ?? ''; ?></span> $
  </td>
</tr>





■支出

//入力フォームに支出の数値を入力する
//idは、expense_1

<input type="text" id = "expense_1" class="form-control" name="expense_1">




■計算結果の表示

//計算結果を表示する場所
//idは、saving_1

<td class = "align-middle"  align = "center" colspan = "2">
  <div class = "viewarea" name = "saving_1"> 
    <span id ="saving_1"><?php echo $data["saving_1"]??''; ?></span>
  </div>
</td>


■計算ボタン

//計算ボタンを押すと、jsファイルが走ります

<div align = "center" class = "col-md-12 mt-5 mb-5">
  <input type = "button" class="btn btn-info btn-lg col-md-6" id = "calcButton2" value = "Calculate">
</div>

jsファイル

$(function(){
    //ボタンを押した時の処理
    $("#calcButton2").click(function(){

        // 収入の値(idは amount_1)を取得して変数に格納
        var amount_1 = $("#amount_1").val();

        // 支出の値(idは expense_1)を取得して変数に格納
        var expense_1 = $("#expense_1").val();
       

        // 収入から支出を引いて、変数saving_1に格納
        var saving_1 = amount_1 - expense_1;

         //結果を表示する
        $("#saving_1").text(saving_1);

 　　})

　　});

質問まとめ

上記のコードで動かないので、データベースから取得した<?php echo $data['amount_1'] ?? ''; ?>に、spanタグを使ってidを付与する　ということがそもそもできないのだろうなと想像しましたが、ではどうすればいいのか、というのがわかりません。
もしくは、記述次第でできるのでしょうか？

初心者でまだまだ未熟ですが、どうぞよろしくお願いいたします！

kei344

2020/06/10 09:57

（質問文は編集できます）提示の内容ではいくつのPHPファイルがどのような関係にあって、どこをクリックしたら何をするのかがわかりません。（少なくとも「#calcButton2」はどこにも無いので動かないということになるし、JavaScriptも途切れているので構文エラーになる）問題が起きる最小限のコードを作成し、再現手順とともに提示されることをお勧めします。

cambodia

2020/06/10 10:08

ご指摘ありがとうございます！質問方法に不備がありすみませんでした。質問を修正します。ありがとうございます！

行動規範の内容に同意します

回答1件

ベストアンサー

<span id ="amount_1">1234</span>
の1234を取得する方法は$("#amount_1").val();ではなく$("#amount_1").text();

html
1<html lang="ja">
2  <head>
3    <meta charset="utf-8">
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5    <title>test</title>
6    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
7  </head>
8  <body>
9    <table>
10      <tr>
11        <td class = "align-middle"  align = "center" colspan = "2">
12          <span id ="amount_1">1234</span>
13        </td>
14      </tr>
15      
16      <tr>
17        <td class = "align-middle"  align = "center" colspan = "2">
18          <div class = "viewarea" name = "saving_1"> 
19            <span id ="saving_1">2222</span>
20          </div>
21        </td>
22      </tr>
23      
24    </table>
25
26<input type="text" id = "expense_1" class="form-control" name="expense_1">
27
28<div align = "center" class = "col-md-12 mt-5 mb-5">
29  <input type = "button" class="btn btn-info btn-lg col-md-6" id = "calcButton2" value = "Calculate">
30</div>
31
32  </body>
33  <script>
34$(function(){
35  //ボタンを押した時の処理
36  $("#calcButton2").click(function(){
37
38    // 収入の値(idは amount_1)を取得して変数に格納
39    var amount_1 = $("#amount_1").text() - 0;
40
41    // 支出の値(idは expense_1)を取得して変数に格納
42    var expense_1 = $("#expense_1").val() - 0;
43
44
45    // 収入から支出を引いて、変数saving_1に格納
46    var saving_1 = amount_1 - expense_1;
47
48    //結果を表示する
49    $("#saving_1").text(saving_1);
50  })
51});
52  </script>
53</html>