Q&A
回答ありがとうございます。
＄を使えば同じ様な仕様になるんですね！
サイトのものをコピペしただけだったので＄の使い方があまり分かりませんでしたが、なんとなく分かった気がします。
教えていただきありがとうございました！
１．自動計算フォーム
２．セレクトボックスの値が変化したらvalue値を取得する←上から4つ目のサンプル
をお借りして、値段×個数＝金額を出したいと思っています。
値段を<span>で反映させているのですが、１つ目の<script>内の
var price1 = document.form1.goods1.selectedIndex * document.getElementById('ok1');
document.form1.field1.value = price1;
の『document.getElementById('ok1')』だとNaNと出てきてしまいます
どうすれば価格が出るのか教えていただきたいです。
html
1<!doctype html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5 <title>お菓子</title> 6 <link rel="stylesheet" href="okashi.css"> 7 <!--値段反映--> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 9 <script type="text/javascript" src="javascript/jquery.min.js"></script> 10 </head> 11<body> 12<main> 13 <div class="box"> 14 <form name="form1"> 15 <table> 16 <tr> 17 <th>菓子</th> 18 <th>値段</th> 19 <th>個数</th> 20 <th>金額</th> 21 </tr> 22 <!--１つめ--> 23 <tr> 24 <td><select id="okashi1"> 25 <option value="5">チョコ</option> 26 <option value="10">ガム</option> 27 <option value="15">飴</option> 28 </select></td> 29 <td><span id="ok1"></span></td> 30 <td><select name="goods1" onChange="keisan()"> 31 <option>0</option> 32 <option>1</option> 33 <option>2</option> 34 <option>3</option> 35 </select></td> 36 <td><input type="text" name="field1" size="10" value="0"> 円</td> 37 </tr> 38 <!--２つめ--> 39 <tr> 40 <td><select id="okashi2"> 41 <option value="5">チョコ</option> 42 <option value="10">ガム</option> 43 <option value="15">飴</option> 44 </select></td> 45 <td><span id="ok2"></span></td> 46 <td><select name="goods2" onChange="keisan()"> 47 <option>0</option> 48 <option>1</option> 49 <option>2</option> 50 <option>3</option> 51 </select></td> 52 <td><input type="text" name="field2" size="10" value="0"> 円</td> 53 </tr> 54 <!--合計--> 55 <tr> 56 <td class="goukei" colspan="3">合計</td> 57 <td><input type="text" name="field_total1" size="10" value="0"> 円</td> 58 </tr> 59 <tr> 60 <td class="goukei" colspan="3">消費税</td> 61 <td><input type="text" name="field_tax" size="10" value="0"> 円</td> 62 </tr> 63 <tr> 64 <td class="goukei" colspan="3"><strong>税込合計</strong></td> 65 <td><input type="text" name="field_total2" size="10" value="0"> 円</td> 66 </tr> 67 </table> 68 </form> 69</div> 70</main> 71<!--計算--> 72<script type="text/javascript"> 73 74function keisan(){ 75 76 var tax = 10; // 消費税率 77 78 // １つめ 79 var price1 = document.form1.goods1.selectedIndex * document.getElementById('ok1'); // 単価を設定 80 document.form1.field1.value = price1; // 小計を表示 81 // ２つめ 82 var price2 = document.form1.goods2.selectedIndex * document.getElementById('ok2'); // 単価を設定 83 document.form1.field2.value = price2; // 小計を表示 84 85 // 合計を計算 86 var total1 = price1 + price2; 87 // 合計を表示 88 document.form1.field_total1.value = total1; 89 // 消費税を表示 90 var tax2 = Math.round((total1 * tax) / 100); 91 document.form1.field_tax.value = tax2; 92 // 税込合計を表示 93 document.form1.field_total2.value = total1 + tax2; 94 95} 96</script> 97<!--値段反映--> 98<script> 99$(function () { 100 101 $("#okashi1").change(function() { 102 const str1 = $("#okashi1").val(); 103 $("#ok1").text(str1); 104 }); 105 106 $("#okashi2").change(function() { 107 const str1 = $("#okashi2").val(); 108 $("#ok2").text(str1); 109 }); 110 111}); 112</script> 113</body> 114</html> 115
回答2件
0
ベストアンサー
js
1document.getElementById('ok1').innerHTML
投稿2020/01/24 04:12
総合スコア69407
0
// (1) document.getElementById('ok1').innerText // (2) $("#ok1").text();
投稿2020/01/24 04:20
総合スコア40
補足ですが、
$()というのは、jQueryの代表的な関数の一つです。
$()では他のJavaScriptフレームワークとかぶる可能性があるので、
jQuery()というような書き方もします。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/01/24 04:19