質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

jqueryで合計料金をリアルタイムで表示する方法

aoihello
aoihello

総合スコア27

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2回答

1リアクション

1クリップ

388閲覧

投稿2022/10/01 08:50

編集2022/10/01 13:02

前提

jqueryで合計料金をリアルタイムで表示するサイトを作っています。

実現したいこと

合計料金を表示したいです。

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

セレクトボックスの変化で反応するようにしているため、選択する前はFirvalueが存在しないと出ています。

該当のソースコード

javascript

$(function() { Firvalue1 = 5000; Firvalue2 = 0; Firvalue3 = 0; macivalue1 = 0; macivalue2 = 0; usevalue1 = 0; usevalue2 = 0; function value() { 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); } $("#group3_type1").change(function(){ let str1 = $("#group3_type1").val(); let Firvalue1 = str1 * 5000; value(Firvalue1); }); $("#group3_type2").change(function() { let str2 = $("#group3_type2").val(); let Firvalue2 = str2 * 5000; let macivalue1 = str2 * 11500; let usevalue1 = str2 * 500; value(Firvalue2, macivalue1, usevalue1); }); $("#group3_type3").change(function(){ let str3 = $("#group3_type3").val(); let Firvalue3 = str3 * 5000; let macivalue2 = str3 * 9300; let usevalue2 = str3 * 500; value(Firvalue3, macivalue2, usevalue2); }); });

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などに初期値が存在しないのがいけないのでしょうか。
それとも関数の外だから参照できていないのでしょうか。

Cocode👍を押しています

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/10/01 13:57

こちらの質問が他のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。