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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

761閲覧

自動計算フォームを作成

masaru_666

総合スコア13

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/07/19 05:53

編集2022/01/12 10:55

JavaScript初心者ですが自動計算フォームを作成しようと考えています。

自分なりに調べて見ましたがどうしてもわからないことがたくさんあり実現方法をご教授いただけると助かります。
1ラジオボタンの数値を合計からマイナスする
2合計の数値が一定以上の時(仮で10000以上)送料の数値を-100から0にする
3合計金額の特定の条件の時priceの値を変える方法
4合計した時の数値の小数点の切り捨て

調べても自動計算までしか出て来ずに困っております。

html

1 2<form action="#" name="form1"> 3<table border="1" style="background-color: #ffffff;"> 4<tr> 5<td>商品画像</td> 6<td>商品1</td> 7<td align="right">106.22</td> 8<td><input type="text" name="goods1" onChange="keisan()" size="2"></td> 9<input type="hidden" name="field1" size="8" value="0"> 10</tr> 11<tr> 12<td>商品画像</td> 13<td>商品2</td> 14<td align="right">106.22</td> 15<td><input type="text" name="goods2" onChange="keisan()" size="2"></td> 16<input type="hidden" name="field2" size="8" value="0"> 17</tr> 18<tr> 19<td>商品画像</td> 20<td>商品3</td> 21<td align="right">106.22</td> 22<td><input type="text" name="goods3" onChange="keisan()" size="2"></td> 23<input type="hidden" name="field3" size="8" value="0"> 24</tr> 25<tr> 26<td> 27<input name="" type="radio" value=""> 送料(100) 28<input name="" type="radio" value=""> 速達(500) 29</td> 30</tr> 31<tr> 32<td align="right" colspan="3">合計</td> 33<td><input type="text" name="field_total1" size="8" value="0"></td> 34</tr> 35</table> 36 37</form>

javascript

1function keisan(){ 2var price1 = document.form1.goods1.value * 106.22; 3document.form1.field1.value = price1; 4var price2 = document.form1.goods2.value * 106.22; 5document.form1.field2.value = price2; 6var price3 = document.form1.goods3.value * 106.22; 7document.form1.field3.value = price3; 8var total1 = price1 + price2 + price3; 9document.form1.field_total1.value = total1; 10}

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/07/19 05:59

>java初心者 細かいのですが、JavaとJavaScriptは全く別物なので、表記・表現にはお気を付けください。
m.ts10806

2019/07/19 06:00

あと、今回はPHPは関係ないのでは?タグを外しておいてください。 また、コードはインデントをきちんとつけておいてください(Web上のサービスもありますができれば構文チェックやフォーマット機能の付いたエディタをお使いください)
mather

2019/07/19 06:01

質問の冒頭に「java初心者ですが」とありますが、質問の内容はJavaScriptですので誤解を招かないようにJavaScriptに修正してください。 JavaとJavaScriptは全くの別物です。JavaScriptを略してJavaにすることはありません。
mather

2019/07/19 06:09

具体的な計算例を記載してください。 すべて「商品1」となっていますが、上から順番にどのような入力値になったときに結果としてはどのような値を表示したいのか例を示してください。 ところで条件の中に「合計の数値が一定以上の時(10000)Aの数値を0にする」とありますが、Aの値とは、もしかして送料無料とかの意味でしょうか? どんなことをしようとしているのか隠さずにイメージを共有したほうが的確な回答が得られやすいですよ。
masaru_666

2019/07/19 06:40

すみませんでした。以後気をつけます。
mather

2019/07/19 06:57

「1000までの時は」とは何が1000なのですか? 「price1の数値を104.22」とはどういうことでしょうか? おそらく「商品価格が1000円未満の場合は(何らかの手数料)が104.22円として計算する」などの意図なのでしょうが…。諸々説明が足りていないので不明なことが多いのです…。
masaru_666

2019/07/19 07:13

文章を少し変えました。 カートに入れて計算した時の合計金額が5000円までは商品の単価が一つ初期の104.22で計算されて、合計金額が5000以上は商品単価が106.22で、更に合計金額が20000以上になると商品単価を112.22に数値を任意の値に変化させるといった考えなのですが、説明が下手で申しわせありません・・・
mather

2019/07/19 07:38

さっきから基準となる数字までごちゃごちゃに変わってますが、なぜそんなことになるんでしょうか…。 新しい単語が出てきましたね。「カートに入れて計算した時の合計金額」はこの画面に表示されている「合計」とは異なるものでしょうか? これが同じ場合、「まず104.22で計算したら5000円以上になったので106.22で計算し直す」というわけのわからない状態が生まれます。
masaru_666

2019/07/22 03:18 編集

再度調べたところ自分が実現したいことと近いものを見つけたものの原理がわからずで困っております。 以下のサイトの計算フォームのようなものを作りたいのですが、どうしたら良いでしょうか?
m.ts10806

2019/07/22 01:01

まず「自分が実現したいこと」をしっかりかためられるよう強くすすめます。
masaru_666

2019/07/22 03:27

そうですよね。 もう一度実現したいことを明確にできるように考え直します。
guest

回答1

0

エスパー的な拡大解釈をしてもここまで

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 [].forEach.call(document.querySelectorAll('#form1 input'),function(x){ 4 x.addEventListener('input',function(e){ 5 var rate=106.22; 6 var v1 = parseFloat(document.querySelector('#form1 [name=goods1]').value ); 7 var v2 = parseFloat(document.querySelector('#form1 [name=goods2]').value ); 8 var v3 = parseFloat(document.querySelector('#form1 [name=goods3]').value ); 9 var v4 = parseFloat(document.querySelector('#form1 [name=r1]:checked').value); 10 var total1 = (v1 + v2 + v3)*rate - v4; 11 var total2 = Math.floor(total1); 12 document.querySelector('#form1 [name=field_total1]').value=total2; 13 }); 14 }) 15//document.form1.field_total1.value = total1; 16}); 17 18</script> 19<form id="form1"> 20<table border="1"> 21<tr> 22<td>商品画像</td> 23<td>商品1</td> 24<td class="right">106.22</td> 25<td><input type="text" name="goods1" size="2" value="0"></td> 26</tr> 27<tr> 28<td>商品画像</td> 29<td>商品1</td> 30<td class="right">106.22</td> 31<td><input type="text" name="goods2" size="2" value="0"></td> 32</tr> 33<tr> 34<td>商品画像</td> 35<td>商品1</td> 36<td class="right">106.22</td> 37<td><input type="text" name="goods3" size="2" value="0"></td> 38</tr> 39<tr> 40<td> 41<label><input name="r1" type="radio" value="0" checked> --</label> 42<label><input name="r1" type="radio" value="100"> A(100)</label> 43<label><input name="r1" type="radio" value="500"> B(500)</label> 44</td> 45</tr> 46<tr> 47<td class="right" colspan="3">合計</td> 48<td><input type="text" name="field_total1" size="8" value="0" value="0"></td> 49</tr> 50</table> 51</form>

2合計の数値が一定以上の時(10000)Aの数値を0にする

「Aの数値」の意味不明→未選択にすればいい?

合計の数値が(中略)変化させる方法

「合計の数値」とは入力した3つの数値?
100と150と200以外のときはどうするの?

投稿2019/07/19 06:23

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問