前提
jqueryで合計料金をリアルタイムで表示するサイトを作っています。
実現したいこと
合計料金を表示したいです。
発生している問題・エラーメッセージ
セレクトボックスの変化で反応するようにしているため、選択する前はFirvalueが存在しないと出ています。
該当のソースコード
javascript
$(function() { $("#group3_type1").change(function(){ var str1 = $("#group3_type1").val(); var Firvalue1 = str1 * 5000; }); $("#group3_type2").change(function() { var str2 = $("#group3_type2").val(); var Firvalue2 = str2 * 5000; var macivalue1 = str2 * 11500; var usevalue1 = str2 * 500; }); $("#group3_type3").change(function(){ var str3 = $("#group3_type3").val(); var Firvalue3 = str3 * 5000; var macivalue2 = str3 * 9300; var usevalue2 = str3 * 500; }); Firvalue = Firvalue1 + Firvalue2 + Firvalue3; $("#init_base_total").append(Firvalue); macivalue = macivalue1 + macivalue2; $("#init_iptel_total").append(macivalue); usevalue = usevalue1 + usevalue2; $("#month_rental_total").append(usevalue); });
PHP
<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="CSS/style.css?<?php echo date('Ymd-Hi');?>"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></head><body><select id="group3_type1" style="font-size: 0.9em; float:left; margin-left:30px"> <option value="0">0</option> <option value="1" selected>1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> </select><select id="group3_type2" style="font-size: 0.9em; float:left; margin-left:30px"> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select><select id="group3_type3" style="font-size: 0.9em; float:left; margin-left:30px"> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <td class="left"></td> <td class="right" id="init_base_total"></td> </tr> <tr> <td class="left"></td> <td class="right" id="init_iptel_total"> </td> </tr> <tr> <td class="left"></td> <td class="right" id="month_rental_total"> </td> </tr> </body></html>
試したこと
一度他の関数内で定義した関数は使えないとのことだったので、数字を後ろにつけて区別するようにしました。
補足情報（FW/ツールのバージョンなど）
できるだけHTMLには触れずにjavascriptの変更だけで実現したいです。
Firvalue1などに初期値が存在しないのがいけないのでしょうか。
それとも関数の外だから参照できていないのでしょうか。
0 コメント