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

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

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

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

Q&A

解決済

3回答

3644閲覧

javascriptで送料計算をしたい。

mimi1001

総合スコア13

JavaScript

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

0グッド

0クリップ

投稿2018/09/10 04:49

編集2018/09/10 05:54

お世話になります。
皆様の知識をお借りしたく、ご質問させていただきます。

送料の計算を、javascriptで実装したく考えています。

ーーーーーーーーーーーーーーーーーー
北海道 個数 @送料 合計表示
ーーーーーーーーーーーーーーーーーー

のような感じで表示させたいと考えています。

「北海道」の部分はプルダウンで選択。
「個数」は手入力で。
「@送料」は都道府県で各3種類あります。

ここで問題としているのが、
個数が2から9個、10から19個、20個以上で送料が変わり、
都道府県で送料単価が変わるのです。

(こちらのサイト様の内容と同じ感じです。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14117598849)

いろんなサイトで、サンプルを見たのですが、似たようなものがなく困っています。

ご教授いただければと思います。

参考にしたサイト様

https://dekikotu.com/demo/demo160702_calc_form/

https://bunjin.com/java/calc.html

===============================================
2018.9.10追記
ご指摘いただき、自分のコードを載せさせていただきます。
プルダウンの連携がうまくいかず、個数入力での計算の仕方もわからず、まだまだ基本ベースです。
申し訳ありません。

javascript

1<script type="text/javascript"> 2 <!-- 3function s(f){ 4f.sum.value = parseInt(f.s2.value) ; 5 6} 7//--> 8</script> 9

HTML

1<body> 2<form> 3<select name="s1" onchange="s(this.form)"> 4<option value="0">都道府県選択</option> 5<option value="hokkaido">北海道</option> 6<option value="aomori">青森県</option> 7<option value="akita">秋田県</option> 8</select> 9<select name="s2" onchange="s(this.form)"> 10<option value="0">個数選択</option> 11<option value="1500" data-val="hokkaido">5-9袋まで</option> 12<option value="1350" data-val="hokkaido">10袋以上</option> 13<option value="1300" data-val="hokkaido">20袋以上</option> 14<option value="1200" data-val="aomori">5-9袋まで</option> 15<option value="1050" data-val="aomori">10袋以上</option> 16<option value="1000" data-val="aomori">20袋以上</option> 17<option value="1100" data-val="akita">5-9袋まで</option> 18<option value="950" data-val="akita">10袋以上</option> 19<option value="900" data-val="akita">20袋以上</option> 20</select> 21<input name="sum" type="text" value="0" style="text-align:right"> 22</form> 23</body> 24</html> 25

=======================================================

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

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

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

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

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

sakura_hana

2018/09/10 04:56

今のままだと丸投げ質問です。https://teratail.com/help/question-tips を参考に、自分で出来るところまでやってください。(基本の計算フォームを作る→個数別の条件分岐を作る→都道府県別の条件分岐を作る、という手順でやるといいと思います)
m.ts10806

2018/09/10 05:03

価格帯や段階(個数)による値段の遷移などは具体的な数値を書かれたほうが良いです(サンプルデータでも結構です)要件的には具体的になってはいそうなので、先ずはその通りに組んでみてください。要件は似ているところがあっても細かいところではどこか違うので、そっくりそのままのものは見つかることはありませんし、基本は様々な情報参考に自身で決めた仕様通り自分で組むしかありません。
m.ts10806

2018/09/10 05:04

間違っていてもうまくいってなくてもそのコードを提示して状況を書き(エラーが起きていればそれを書き)、どこまでできているか、何ができていないことで的確なアドバイスを得られます。
mimi1001

2018/09/10 05:22

お返事ありがとうございます。コードを追加させていただきました。申し訳ありませんでした。
x_x

2018/09/10 05:26

個数は自由入力ではないのでしょうか?
mimi1001

2018/09/10 05:37

x_x様 個数を自由入力にしたいのですが、送料単価との計算の仕方がわからず、今はここで止まっている状態です。
m.ts10806

2018/09/10 05:45

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入(エラーメッセージの場合は不要)の手順で「コードハイライト化」してください。(質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください)
mimi1001

2018/09/10 05:56

mts10806様 ご指摘いただきありがとうございます。コードのハイライトをさせていただきました。
guest

回答3

0

HTML

1<form onchange="return s(event);"> 2 <select name="s1"> 3 <option value="0">都道府県選択</option> 4 <option value="hokkaido">北海道</option> 5 <option value="aomori">青森県</option> 6 <option value="akita">秋田県</option> 7 </select> 8 <input name="s2" type="number" min="0" /> 9 <output name="sum"></output> 10</form>

JavaScript

1function s(event) { 2 const form = event.currentTarget; 3 const shipping = form.elements['s1'].selectedOptions[0].value; 4 const number = form.elements['s2'].valueAsNumber; 5 if (shipping === '0' || isNaN(number)) { 6 form.elements['sum'].value = ''; 7 return true; 8 } 9 10 form.elements['sum'].value = (tbl[shipping][number >= 20 ? 2 : number >= 2 ? 1 : 0] * number).toString(); 11 return true; 12}

投稿2018/09/10 06:49

x_x

総合スコア13749

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

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

mimi1001

2018/09/14 05:13

ご回答いただきありがとうございます。 お返事が遅くなりまして申し訳ありません。 数字の入力のスペースの書き方をご提示いただきありがとうございます! スペースをnumberにして、javascriptでカウントの制御という感じでしょうか? 参考に構築してみようと思います! ありがとうございました。
x_x

2018/09/14 06:40

スペースとは何でしょうか? 提示されていない情報についてはわかりません。
guest

0

ベストアンサー

色々と手直しをしましたが、今の作りを活かしつつ汎用的に作ってみました。

html

1<form name="souryo"> 2<select name="s1" onchange="s(this)"> 3<option value="0">都道府県選択</option> 4<option value="hokkaido">北海道</option> 5<option value="aomori">青森県</option> 6<option value="akita">秋田県</option> 7</select> 8<select name="s2" onchange="s2get(this)"> 9<option value="0">個数選択</option> 10</select> 11<input name="sum" type="text" value="0" style="text-align:right"> 12</form>

js

1window.onload = resetOption;//起動時にs2初期化実行 2//送料テーブル 3var soryo_table = { 4 "hokkaido":[1500,1350,1300], 5 "aomori":[1200,1050,1000], 6 "akita":[1100,950,900] 7}; 8var bag_table = ["5-9袋まで","10袋以上","20袋以上"]; 9 10//s2初期化 11function resetOption(){ 12 var select = document.souryo.s2; 13 var options = select.options; 14 for (var i = options.length - 1; 0 <= i; --i) { 15 select.removeChild(options[i]); 16 } 17} 18//s1操作時の処理 19function s(s1ele){ 20 resetOption(); //選択肢初期化 21 var s2= document.souryo.s2; 22 var option = document.createElement("option"); 23 option.value = 0; 24 option.innerText = "個数選択"; 25 s2.appendChild(option); 26 if(s1ele.value in soryo_table){ //送料テーブルに存在する値か 27 for(var i = 0;i<soryo_table[s1ele.value].length;i++){ //該当する送料テーブルから選択肢を生成 28 var option = document.createElement("option"); 29 option.value = soryo_table[s1ele.value][i]; 30 option.innerText = bag_table[i]; 31 s2.appendChild(option); 32 } 33 } 34} 35//s2操作時の処理 36function s2get(s2ele){ 37 console.log(s2ele.value); //s2の値 38}

配列で送料テーブルを定義して、動的にselectの選択肢を追記する形で作っています。
最初から全てあってはどれがどれか分かりませんし、不要な選択肢は表示すべきではないです(disabledにする手もありますが、それならそもそも出さない方がユーザー的にはストレスがない)

<script></script></body>の直前に移動させてください。
たぶんこれから色々と処理を追加されていくものと思いますので、作りかけっぽい感じにしています。

その後のヒント:
s2がとれればそれと個数との掛け算となります。
ただ、取得できる情報は数字に見えて型は「文字列」なので、文字列から数値に変換した上で掛け算しましょう。

追記:
デバッグは覚えておきましょう。

投稿2018/09/10 06:27

m.ts10806

総合スコア80731

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

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

mimi1001

2018/09/10 07:15

お返事いただきありがとうございます。 手直ししていただいた、コードを拝見させていただきました。 s2の文字列を数値にして、掛け算と言うこともコメントを読んで、調べて見ました。 「parseInt」を使って、と言うことでよろしいでしょうか? あと、なぜ<script>~</script>は</body>の直前に移動させるのでしょうか? よろしくお願いいたします。
m.ts10806

2018/09/10 07:28

> 「parseInt」を使って、と言うことでよろしいでしょうか? そうですね。文字列の場合は "1"+"1" は 11になりますので。 > なぜ<script>~</script>は</body>の直前に移動させるのでしょうか? JavaScriptは基本的にはHTMLに対する操作を行います。 headのところにあるとHTMLが全て読み込まれていない状態で作動することになります。 そのため、</body>の前に置くことでHTMLが全て読み込まれた状態で実行できるようになります。 もちろんdocumentのonloadだったりwindowのonloadを入れればその問題もある程度は防げますが、 ブラウザやそのバージョンによっても挙動が違うらしく(全て把握しているわけではありませんが) </body>の前に置くことで確実に実行されるということになります。
mimi1001

2018/09/14 05:16

お返事ありがとうございます! お返事が遅くなりまして申し訳ありません。 疑問に答えていただきありがとうございます。 scriptはhead内に書き込むものだと思っていましたので、お返事を見て納得いたしました。 とても勉強になりました。 ありがとうございました。
m.ts10806

2018/09/14 05:17

解決したようで何よりです。 ただ、私の回答はベストとは限りませんので、ひとつの参考として色々試してみてください
mimi1001

2018/09/14 06:08

まだまだ試行錯誤しておりますが、 私からみて、不要な選択肢を見せないというのは納得がいきますし、構文が綺麗だなぁと感じましたのでベストに選ばせていただきました。 こちらをベースに使用して、作成するのはまだまだ先になるかもしれません。 読み解けても構築できない初心者ですが、頑張ってみます!
guest

0

全通りオブジェクトに設定しておけばよいでしょう

追記

もしご提示のデータ形式で管理したいならこうでしょうか

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 set_s2(); 4 document.querySelector('#s1').addEventListener('change',function(e){ 5 set_s2(); 6 }); 7 document.querySelector('#s2').addEventListener('change',function(e){ 8 set_s3(); 9 }); 10}); 11function set_s2(){ 12 var v=document.querySelector('#s1').value; 13 document.querySelector('#s2').selectedIndex=0; 14 [].forEach.call(document.querySelectorAll('#s2 option:not([value="0"])'),function(x){ 15 x.style.display=(x.dataset["val"] && x.dataset["val"]===v)?"":"none"; 16 }); 17 set_s3(); 18} 19function set_s3(){ 20 document.querySelector('#s3').value=document.querySelector('#s2').value; 21} 22</script>

HTML

1<form> 2<select name="s1" id="s1"> 3<option value="">都道府県選択</option> 4<option value="hokkaido">北海道</option> 5<option value="aomori">青森県</option> 6<option value="akita">秋田県</option> 7</select> 8<select name="s2" id="s2"> 9<option value="0">個数選択</option> 10<option value="1500" data-val="hokkaido">5-9袋まで</option> 11<option value="1350" data-val="hokkaido">10袋以上</option> 12<option value="1300" data-val="hokkaido">20袋以上</option> 13<option value="1200" data-val="aomori">5-9袋まで</option> 14<option value="1050" data-val="aomori">10袋以上</option> 15<option value="1000" data-val="aomori">20袋以上</option> 16<option value="1100" data-val="akita">5-9袋まで</option> 17<option value="950" data-val="akita">10袋以上</option> 18<option value="900" data-val="akita">20袋以上</option> 19</select> 20<input name="sum" type="text" value="0" style="text-align:right" id="s3"> 21</form>

nameで参照

※s1からs2の流れを見やすくするためにカッコで番号をつけてあります

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 set_s2(); 4 document.querySelector('[name="s1"]').addEventListener('change',function(e){ 5 set_s2(); 6 }); 7 document.querySelector('[name="s2"]').addEventListener('change',function(e){ 8 set_s3(); 9 }); 10}); 11function set_s2(){ 12 var v=document.querySelector('[name="s1"]').value; 13 document.querySelector('[name="s2"]').selectedIndex=0; 14 [].forEach.call(document.querySelectorAll('[name="s2"] option:not([value="0"])'),function(x){ 15 x.style.display=(x.dataset["val"] && x.dataset["val"]===v)?"":"none"; 16 }); 17 set_s3(); 18} 19function set_s3(){ 20 document.querySelector('[name="sum"]').value=document.querySelector('[name="s2"]').value; 21} 22</script> 23<form> 24<select name="s1"> 25<option value="">都道府県選択</option> 26<option value="hokkaido">北海道(1)</option> 27<option value="aomori">青森県(2)</option> 28<option value="akita">秋田県(3)</option> 29</select> 30<select name="s2"> 31<option value="0">個数選択</option> 32<option value="1500" data-val="hokkaido">5-9袋まで(1)</option> 33<option value="1350" data-val="hokkaido">10袋以上(1)</option> 34<option value="1300" data-val="hokkaido">20袋以上(1)</option> 35<option value="1200" data-val="aomori">5-9袋まで(2)</option> 36<option value="1050" data-val="aomori">10袋以上(2)</option> 37<option value="1000" data-val="aomori">20袋以上(2)</option> 38<option value="1100" data-val="akita">5-9袋まで(3)</option> 39<option value="950" data-val="akita">10袋以上(3)</option> 40<option value="900" data-val="akita">20袋以上(3)</option> 41</select> 42<input name="sum" type="text" value="0" style="text-align:right"> 43</form>

投稿2018/09/10 05:12

編集2018/09/14 05:33
yambejp

総合スコア114505

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

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

mimi1001

2018/09/14 05:11

ご回答いただきありがとうございます。 お返事が遅くなり申し訳ありません。 <select name="s2" id="s2">にすればよかったのですね! 勉強になりました! ありがとうございました。 参考に構築してみようと思います。
yambejp

2018/09/14 05:13

nameからでも拾えますが、nameはユニークではない可能性があるので できればidを振ったほうがいいでしょう
mimi1001

2018/09/14 05:25

なるほど! ちなみになのですが、北海道を選択した際にdate-val="hokaido"の3種類だけを表示させたかったのですが全部でてきてしまうのは何故なのでしょうか?
yambejp

2018/09/14 05:34

nameの件を追記しておきました。 >全部でてきてしまう 一応チェックした範囲ではそんなことないのですが 試されたOSやブラウザはなんでしょうか?
mimi1001

2018/09/14 06:04

追記いただきありがとうございます! 試したOSですが、macos 10.13.6 safari11.1.2になります。 今、chromeで試したら大丈夫でした。
yambejp

2018/09/14 06:15

addEventListener、querySelector、datasetあたりsafariでも 実装しているっぽいのですが・・・ safariの開発メニューがあればどこでエラーを吐いてるか 確認できませんか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問