- ベストアンサー
JavaScriptで計算表を作成する方法
- JavaScriptを使用して、AA項目とBB項目を掛け合わせた結果をCC項目に表示する計算表を作成する方法を教えてください。
- また、CC項目とDD項目を掛けた数字をすべて足した結果を「FF」とし、CC項目とDD項目にEE項目で選択した数字を掛け合わせた結果をすべて足した結果を「GG」として表示する方法も教えてください。
- さらに、計算ボタンをクリックすると「FF」と「GG」を計算し、クリアボタンをクリックすると全ての入力項目をクリアする機能も実装したいです。
- みんなの回答 (5)
- 専門家の回答
質問者が選んだベストアンサー
こんにちは >EE「か」を選択---AA「あ」---20.2・・・(略)・・・という計算にしたいのですが。 これは可能ですが >FF項目に、EE項目の選択とAA項目の選択によって掛ける値が違うようにしたいのですが。(FF項目*倍率) これはできません 例えば A(1)あ A(2)え A(3)い E(1)か と選択していたとすると A(1)-E(1)で20.2、A(2)-E(1)で10.5、A(3)-E(1)で15.8、という風に3種類数値が出てきます なのでどの数値を使用してFF項目に掛けるのか?という問題が出てきます これが >>>※AA項目のどれを基準にするか決めれないので『 1つ 』は無理です と書いた理由です とりあえず今までの質疑から ・AA項目 あ(=40)い(=30)う(=20)え(=10)お(=5)のセレクトボックス『 5つ 』 ・BB項目 ユーザー入力 テキストボックス『 5つ 』 ・CC項目 C(1)=A(1)*B(1)、C(2)=A(2)*B(2)・・・のAA項目*BB項目のテキストボックス『 5つ 』 ・DD項目 「2割~8割」のセレクトボックス『 1つ 』 ・EE項目 「か~こ」のセレクトボックス『 1つ 』 ・FF項目 CC項目5つの合計*DD項目のテキストボックス『 1つ 』 DD(1)*○割になってるけどCC(1)*○割の間違いです?? ・GG項目 A(1)*B(1)*DD*{EE項目に対するA(1)選択の値} + A(2)*B(2)*DD*{EE項目に対するA(2)選択の値} + ・・・ という感じにしてます (例) A(1)あ A(2)う B(1)5 B(2)3 DD 0.5 EE か GG = { 40*5*0.5*20.2 } + { 20*3*0.5*13.7 } = 2020 + 411 = 2431 ※今回のEEsは EEs = [[""],[EE(か)を選択したときのAの選択による倍率],[EE(き)を選択したときのAの選択による倍率],・・・ になっています <style type="text/css"><!-- select { width:106px; } input { width:100px; } --></style> <script type="text/javascript"><!-- document.getElementsByClassName = function (className) { var i, j, eltClass; var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; var objCN = new Array(); for (i = 0; i < objAll.length; i++) { eltClass = objAll[i].className.split(/\s+/); for (j = 0; j < eltClass.length; j++) { if (eltClass[j] == className) { objCN.push(objAll[i]); break; } } } return objCN; } window.onload = function() { obj1 = obj2 = obj4 = obj5 = EEs = new Array(); obj1 = document.getElementsByClassName("AA"); obj2 = document.getElementsByClassName("BB"); obj3 = document.getElementsByClassName("CC"); obj4 = document.getElementsByClassName("DD"); obj5 = document.getElementsByClassName("EE"); obj6 = document.getElementsByClassName("FF"); obj7 = document.getElementsByClassName("GG"); EEs = [[""],["","20.2","15.8","13.7","10.5","8.2"],["","31.6","28.1","22.4","17.2","14.7"],["","?","?","?","?","?"],["","?","?","?","?","?"],["","?","?","?","?","?"]]; for(i=0;i<obj1.length;i++) { obj1[i].onchange = function() { col1(); } } for(i=0;i<obj2.length;i++) { obj2[i].onkeyup = function() { col1(); } } } function col1() { for(i=0;i<obj1.length;i++) { obj3[i].value = obj1[i].value * obj2[i].value; if(obj3[i].value == "0") obj3[i].value = ""; } } function col2() { num=0; for(i=0;i<obj3.length;i++) { if(obj3[i].value == "") { n=0; } else { n = eval(obj3[i].value); } num += n; } obj6[0].value = num; } function col3() { total = 0; for(i=0;i<obj1.length;i++) { m = obj5[0].selectedIndex; n = obj1[i].selectedIndex; val = EEs[m][n]; nums = obj1[i].value * obj2[i].value * obj4[0].value * val; total += nums; } obj7[0].value = total; } //--></script> <form> <div> <select class="AA"> <option value="">選択</option> <option value="40">あ</option> <option value="30">い</option> <option value="20">う</option> <option value="10">え</option> <option value="5">お</option> </select> <select class="AA"> <option value="">選択</option> <option value="40">あ</option> <option value="30">い</option> <option value="20">う</option> <option value="10">え</option> <option value="5">お</option> </select> <select class="AA"> <option value="">選択</option> <option value="40">あ</option> <option value="30">い</option> <option value="20">う</option> <option value="10">え</option> <option value="5">お</option> </select> <select class="AA"> <option value="">選択</option> <option value="40">あ</option> <option value="30">い</option> <option value="20">う</option> <option value="10">え</option> <option value="5">お</option> </select> <select class="AA"> <option value="">選択</option> <option value="40">あ</option> <option value="30">い</option> <option value="20">う</option> <option value="10">え</option> <option value="5">お</option> </select> </div> <div> <input type="text" class="BB"> <input type="text" class="BB"> <input type="text" class="BB"> <input type="text" class="BB"> <input type="text" class="BB"> </div> <div> <input type="text" class="CC" readonly> <input type="text" class="CC" readonly> <input type="text" class="CC" readonly> <input type="text" class="CC" readonly> <input type="text" class="CC" readonly> </div> <div> <select class="DD"> <option value="">選択</option> <option value="0.2">2割</option> <option value="0.3">3割</option> <option value="0.4">4割</option> <option value="0.5">5割</option> <option value="0.6">6割</option> <option value="0.7">7割</option> <option value="0.8">8割</option> </select> </div> <div> <select class="EE"> <option value="">選択</option> <option value="">か</option> <option value="">き</option> <option value="">く</option> <option value="">け</option> <option value="">こ</option> </select> </div> <div> <input type="text" class="FF" readonly> </div> <div> <input type="text" class="GG" readonly> </div> <input type="button" value="計算" onclick="col2();col3();"> <input type="reset" value="クリア"> </form>
その他の回答 (4)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは EE項目の選択肢の判別方法とEEsの参照の仕方が異なるだけで#2のやりかたでできますが? 【#4変更部位】 function col3() { total = 0; for(i=0;i<obj1.length;i++) { m = obj5[0].selectedIndex; n = obj1[i].selectedIndex; val = EEs[m][n]; obj7[i].value = obj1[i].value * obj2[i].value * obj4[0].value * val; if(obj7[i].value == "0") obj7[i].value = "";} } <div> <input type="text" class="GG" readonly> <input type="text" class="GG" readonly> <input type="text" class="GG" readonly> <input type="text" class="GG" readonly> <input type="text" class="GG" readonly> </div> それともAA1 { A(1),A(2),A(3) } , AA2 { A(4),A(5) }という風に分けるということ? これは#4を少し変える(場合分けする)だけでできます function col3() { m = obj5[0].selectedIndex; total = 0; for(i=0;i<3;i++) { n = obj1[i].selectedIndex; val = EEs[m][n]; nums = obj1[i].value * obj2[i].value * obj4[0].value * val; total += nums; } obj7[0].value = total; total = 0; for(i=3;i<5;i++) { n = obj1[i].selectedIndex; val = EEs[m][n]; nums = obj1[i].value * obj2[i].value * obj4[0].value * val; total += nums; } obj7[1].value = total; } <div> <input type="text" class="GG" readonly> <input type="text" class="GG" readonly> </div> FF項目は・・・ >「AA1」グループ合計 + 「AA2」グループ合計・・・ ということはそのまま? 違うようであれば上記を参考に function col2() { } をつついてみてください
お礼
申し訳ありませんm(_ _)m 私の勘違いでした。 自分から、GG項目を二つで出したいと質問しておいて、 誠に申し訳ありませんでした。 また、ご教授願うことがあると思いますが、 宜しくお願いします。 本当にありがとうございました。
補足
leap_dayさん、ありがとうございます。 FF項目は、 CC項目AA1グループ×DD項目で選択した割合+CC項目AA2グループ×DD項目 で表示させることはできましたが、(多分) GG項目は、計算方式は変わらないのですが、 その合計を1つに表示させたいのですが、上手くできません(泣) 何度も申し訳ありませんが、ご教授の程宜しくお願いします。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 質問から理解しているのと補足とでちょっと違うようなので整理したいのですが・・・ AA項目・・・「あ~お」のセレクトボックスが『 5つ 』(#2のような感じ) BB項目・・・ユーザー入力のテキストボックスが『 5つ 』(#2のような感じ) CC項目・・・計算結果表示のテキストボックスが『 5つ 』 >{A(1)×B(1)×ユーザ入力(1)}を表示 とありますがB(1)=ユーザー入力(1)では? もしかして A(1) * D(1) * ユーザー入力(1) ? DD項目・・・「2割~8割」のセレクトボックスが『 5つ 』(#2のような感じ) ※補足からでは『 1つ 』のようにも思われる EE項目・・・AA項目の選択によってvalue値が変化するセレクトボックスが『 5つ 』(#2のような感じ) ※AA項目のどれを基準にするか決めれないので『 1つ 』は無理です FF項目・・・計算結果表示のテキストボックスが『 1つ 』 計算 → CC項目のテキストボックス『 5つ 』の合計 GG項目・・・計算結果表示のテキストボックスが『 1つ 』 計算 → それぞれのCC項目 * EE項目の合計{C(1)*E(1) + C(2)*E(2) + ・・・) CC項目の計算結果は自動計算 FF項目、GG項目の計算結果は『計算』ボタンを押すことによって計算 ということですか?
補足
leap_dayさん、ありがとうございます。 拙い説明で申し訳ありません。 >AA項目・・・「あ~お」のセレクトボックスが『 5つ 』(#2のような感じ) おっしゃる通りです。 >BB項目・・・ユーザー入力のテキストボックスが『 5つ 』(#2のような感じ) これも、おっしゃる通りです。 >CC項目・・・計算結果表示のテキストボックスが『 5つ 』 こちらの入力ミスでした。申し訳ありません。 「{A(1)×B(1)}を表示}」でした。 >DD項目・・・「2割~8割」のセレクトボックスが『 5つ 』(#2のような感じ) これは、『1つ』です。 その際に、DD項目は1つですが、FF項目に計算結果を表示する時に、 DD(1)×○割+DD(2)×○割……という計算合計をFF項目に表示するというふうにしたいのですが。 >EE項目・・・AA項目の選択によってvalue値が変化するセレクトボックスが『 5つ 』(#2のような感じ) >※AA項目のどれを基準にするか決めれないので『 1つ 』は無理です。 EE「か」を選択---AA「あ」---20.2 〃 ---〃「い」---15.8 〃 ---〃「う」---13.7 〃 ---〃「え」---10.5 〃 ---〃「お」---8.2 EE「き」を選択---AA「あ」---31.6 〃 ---〃「い」---28.1 〃 ---〃「う」---22.4 〃 ---〃「え」---17.2 〃 ---〃「お」---14.7 という計算にしたいのですが。 やはり、1つのセレクトボックスでは無理でしょうか? >FF項目・・・計算結果表示のテキストボックスが『 1つ 』 計算は、CC項目の内容の通りの計算でできますか? >GG項目・・・計算結果表示のテキストボックスが『 1つ 』 FF項目に、EE項目の選択とAA項目の選択によって掛ける値が違うようにしたいのですが。 (例) FF項目×15.8(EE項目「か」を選択--AA項目「い」を選択した場合) >CC項目の計算結果は自動計算 >FF項目、GG項目の計算結果は『計算』ボタンを押すことによって計算 はい。 何度も申し訳ありませんが、ご教授の程宜しくお願いします。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは ※『計算ボタン』で計算させることもできたのですがついでなので自動処理にしました ※EEsには EEs = [[""],[AA項目「あ」に対する「か」~「こ」の値],[AA項目の「い」に対する「か」~「こ」の値],・・・となってます 「?」の部分を書き換えてください ※計算値が『0』の時には計算結果には何も表示されませんので・・・ CC = AA * BB; FF = CC * DD; GG = FF * EE; ということですよね? <style type="text/css"><!-- select { width:106px; } input { width:100px; } --></style> <script type="text/javascript"><!-- document.getElementsByClassName = function (className) { var i, j, eltClass; var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; var objCN = new Array(); for (i = 0; i < objAll.length; i++) { eltClass = objAll[i].className.split(/\s+/); for (j = 0; j < eltClass.length; j++) { if (eltClass[j] == className) { objCN.push(objAll[i]); break; } } } return objCN; } window.onload = function() { obj1 = obj2 = obj4 = obj5 = EEs = new Array(); obj1 = document.getElementsByClassName("AA"); obj2 = document.getElementsByClassName("BB"); obj3 = document.getElementsByClassName("CC"); obj4 = document.getElementsByClassName("DD"); obj5 = document.getElementsByClassName("EE"); obj6 = document.getElementsByClassName("FF"); obj7 = document.getElementsByClassName("GG"); EEs = [[""],["","20.2","31.6","?","?","?"],["","15.8","28.1","?","?","?"],["","13.7","22.4","?","?","?"],["","10.5","17.2","?","?","?"],["","8.2","14.7","?","?","?"]]; for(i=0;i<obj1.length;i++) { obj1[i].onchange = function() { col1();col2();col3(); } } for(i=0;i<obj2.length;i++) { obj2[i].onkeyup = function() { col1();col2();col3(); } } for(i=0;i<obj4.length;i++) { obj4[i].onchange = function() { col1();col2();col3(); } } for(i=0;i<obj5.length;i++) { obj5[i].onchange = function() { col1();col2();col3(); } } } function col1() { for(i=0;i<obj1.length;i++) { obj3[i].value = obj1[i].value * obj2[i].value; if(obj3[i].value == "0") obj3[i].value = ""; } } function col2() { for(i=0;i<obj3.length;i++) { obj6[i].value = obj3[i].value * obj4[i].value; if(obj6[i].value == "0") obj6[i].value = ""; } } function col3() { for(i=0;i<obj5.length;i++) { m = obj1[i].selectedIndex; n = obj5[i].selectedIndex; val = EEs[m][n]; obj7[i].value = obj3[i].value * obj4[i].value * val; if(obj7[i].value == "0") obj7[i].value = ""; } } //--></script> <form> <div> <select class="AA"> <option value="">選択</option> <option value="40">あ</option> <option value="30">い</option> <option value="20">う</option> <option value="10">え</option> <option value="5">お</option> </select> <select class="AA"> <option value="">選択</option> <option value="40">あ</option> <option value="30">い</option> <option value="20">う</option> <option value="10">え</option> <option value="5">お</option> </select> <select class="AA"> <option value="">選択</option> <option value="40">あ</option> <option value="30">い</option> <option value="20">う</option> <option value="10">え</option> <option value="5">お</option> </select> <select class="AA"> <option value="">選択</option> <option value="40">あ</option> <option value="30">い</option> <option value="20">う</option> <option value="10">え</option> <option value="5">お</option> </select> <select class="AA"> <option value="">選択</option> <option value="40">あ</option> <option value="30">い</option> <option value="20">う</option> <option value="10">え</option> <option value="5">お</option> </select> </div> <div> <input type="text" class="BB"> <input type="text" class="BB"> <input type="text" class="BB"> <input type="text" class="BB"> <input type="text" class="BB"> </div> <div> <input type="text" class="CC" readonly> <input type="text" class="CC" readonly> <input type="text" class="CC" readonly> <input type="text" class="CC" readonly> <input type="text" class="CC" readonly> </div> <div> <select class="DD"> <option value="">選択</option> <option value="0.2">2割</option> <option value="0.3">3割</option> <option value="0.4">4割</option> <option value="0.5">5割</option> <option value="0.6">6割</option> <option value="0.7">7割</option> <option value="0.8">8割</option> </select> <select class="DD"> <option value="">選択</option> <option value="0.2">2割</option> <option value="0.3">3割</option> <option value="0.4">4割</option> <option value="0.5">5割</option> <option value="0.6">6割</option> <option value="0.7">7割</option> <option value="0.8">8割</option> </select> <select class="DD"> <option value="">選択</option> <option value="0.2">2割</option> <option value="0.3">3割</option> <option value="0.4">4割</option> <option value="0.5">5割</option> <option value="0.6">6割</option> <option value="0.7">7割</option> <option value="0.8">8割</option> </select> <select class="DD"> <option value="">選択</option> <option value="0.2">2割</option> <option value="0.3">3割</option> <option value="0.4">4割</option> <option value="0.5">5割</option> <option value="0.6">6割</option> <option value="0.7">7割</option> <option value="0.8">8割</option> </select> <select class="DD"> <option value="">選択</option> <option value="0.2">2割</option> <option value="0.3">3割</option> <option value="0.4">4割</option> <option value="0.5">5割</option> <option value="0.6">6割</option> <option value="0.7">7割</option> <option value="0.8">8割</option> </select> </div> <div> <select class="EE"> <option value="">選択</option> <option value="">か</option> <option value="">き</option> <option value="">く</option> <option value="">け</option> <option value="">こ</option> </select> <select class="EE"> <option value="">選択</option> <option value="">か</option> <option value="">き</option> <option value="">く</option> <option value="">け</option> <option value="">こ</option> </select> <select class="EE"> <option value="">選択</option> <option value="">か</option> <option value="">き</option> <option value="">く</option> <option value="">け</option> <option value="">こ</option> </select> <select class="EE"> <option value="">選択</option> <option value="">か</option> <option value="">き</option> <option value="">く</option> <option value="">け</option> <option value="">こ</option> </select> <select class="EE"> <option value="">選択</option> <option value="">か</option> <option value="">き</option> <option value="">く</option> <option value="">け</option> <option value="">こ</option> </select> </div> <div> <input type="text" class="FF" readonly> <input type="text" class="FF" readonly> <input type="text" class="FF" readonly> <input type="text" class="FF" readonly> <input type="text" class="FF" readonly> </div> <div> <input type="text" class="GG" readonly> <input type="text" class="GG" readonly> <input type="text" class="GG" readonly> <input type="text" class="GG" readonly> <input type="text" class="GG" readonly> </div> <input type="reset" value="クリア"> </form>
補足
leap_dayさん、ありがとうございます。 上手く説明できていないかも知れませんが、 AA---あ~お(1) BB---ユーザ入力(1) | | -- 〃 (2) -- 〃 (2) | | -- 〃 (3) -- 〃 (3) | | -- 〃 (4) -- 〃 (4) | | -- 〃 (5) -- 〃 (5) CC---{A(1)×B(1)×ユーザ入力(1)}を表示-- | | --{A(2)×B(2)×ユーザ入力(2)} 〃 | | | --{A(3)×B(3)×ユーザ入力(3)} 〃 | × 割合選択 | | --{A(4)×B(4)×ユーザ入力(4)} 〃 | ※ 1項目合計ごとに割合を掛ける | | --{A(5)×B(5)×ユーザ入力(5)} 〃 -- (例)割合を2割としたら {A(1)×B(1)×ユーザ入力(1)}×2割 {A(2)×B(2)×ユーザ入力(2)}×2割 DD---か~こ------AA項目で「あ」を選択したときに計算する数値 | | -- 〃 --- 〃 「い」 〃 | | -- 〃 --- 〃 「う」 〃 | | -- 〃 --- 〃 「え」 〃 | | -- 〃 --- 〃 「お」 〃 FF → CC項目を全部足した合計 GG → FF × DD(AA項目で選択したものによって、数値が違う) という感じなのですが…。 後、出来れば、計算ボタンは欲しいのですが、ボタンをクリックすると計算という形はできますか?
- VCAT
- ベストアンサー率20% (16/79)
これそっくりウェブ屋にもっていくと結構な料金で作ってくれる シロモノだよね(まさか、ウェブ屋が丸投げしてたりして)。 そうするともっといいのは、メンテまでしてくれるんだけど、 せっかく書いてあげても自分で修正やらできるのかなあ。 自分である程度勉強してからの方がよくないですか?
補足
VCATさん ウェブ屋ではありません。 計算シミュレーションとして使いたいと思っています。 自分で1から作成することは出来ませんが、 「ここをこうすれば、こうなるんじゃないか」ぐらいは分かると思っています。 やはり、質問しているような内容は、無謀なことなのでしょうか? ********** 1つ訂正です。 DD項目の割合は、一律での計算でできませんでしょうか?
補足
leap_dayさん 何度も申し訳ありません。 >FF項目 >DD(1)*○割になってるけどCC(1)*○割の間違いです?? 申し訳ありません、leap_dayさんのおっしゃる通りです。 追加でお尋ねしても宜しいでしょうか? 現在、AA項目を1つのグループとして考えていますが、 ・AA項目を「AA1」と「AA2」に分ける。 ・FF項目の計算もグループ分けしたしたグループ毎に計算する (例) 「AA1」のグループ合計+「AA2」のグループ合計の計をFF項目に ※ 計算方法は変わらず ・GG項目 「AA1」グループの計算結果表示 「AA2」グループの計算結果表示 という具合に出来ますでしょうか? 何度も申し訳ありませんが、よろしくお願いします。