最近、javascriptの勉強をさせてもらっております。javascriptでは自動計算ができると聞き、ハードルが高いとは思うのですが、占い好きの私に以下の事に挑戦させて下さい。
セレクトメニューの連動を使用して、誕生月を選んだら、その月に応じて異なった好きな食べ物のメニューが表示されるという事がまず最初。
そして、誕生月の各月の項目にそれぞれ異なった数字を格納して下の「S」に代入し、それと同じように、食べ物のメニューの項目のそれぞれに3個ワンセットの異なった数字を格納して下の「A,B,C」に代入したいのです。
連動はここまでで、新たに好きな3桁の数字のセレクトメニューと
好きな2桁の数字のセレクトメニューを作り、独自の計算式(1)~(6)を経て、ラッキーナンバーを出すという事をしたいのですが、セレクトメニューの各月の項目に数字を格納というか、その項目を選ぶ事により、そこの項目に設定した数字を計算式に代入させる(Sに代入)やり方が解りません。
同様に食べ物のある項目を選択すると、その項目に設定した3個ワンセットの数字を計算式に代入させる(A,B,Cに代入)やり方が解りません。
解る部分は、ある書物を参考にして書いてみましたが、つなぎ合わせた感じになってしまって、すみません。そして説明の仕方がややこしくなってしまいましたがよろしくお願いします。(独自の計算式(1)~(6)の内容は気にしないで下さい)
----------------------------------------------------------------
<html>
<head>
<title>あなたのラッキーナンバー</title>
</head>
<body>
<form name="calcuation">
//セレクトメニューの連動部分が解りません。こんな感じにしたいのですが。
私の誕生月は
<select name="month" onChange="calculation();">
<option value="23">1月 // ここには数字の「23(Sに代入)」が格納されている
<option value="12">2月 // ここには数字の「12(Sに代入)」が格納されている
<option value="56">3月
<option value="89">4月
<option value="5" selected>5月
<option value="88">6月
<option value="70">7月
<option value="">8月
<option value="">9月
<option value="">10月
<option value="">11月
<option value="">12月
</select>で、
(例えば、3月を選択すると食べ物メニューが出て選択する)
好きな食べ物は
<select name="food" onChange="calculation();">
<option>トマト
<option value="8,24,200">マグロ //ここには数字の「8,24,200(A,B,Cにワンセットでそれぞれに代入)」が格納されている
<option value="2,205,1555">みかん //ここには数字の「2,205,1555(A,B,Cにワンセットでそれぞれに代入)」が格納されている
<option>納豆
<option selected>豆腐
<option>ラーメン
</select>
です
つまり、1月生まれでマグロが好きな場合、選択した時、「S」→「23」「A」→「8」「B」→「24」「C」→「200」を同時に代入させたいです。
ここから下の部分は参考書を元に書いてみました。
私の好きな3桁の数字は
<select name="number_1" onChange="calculation();">
<option>100
<option>200
<option>300
<option>400
<option selected>500
<option>600
<option>700
<option>800
<option>900
</select>で、私の好きな2桁の数字は
<select name="number_2" onChange="calculation();">
<option>10
<option>20
<option>30
<option>40
<option selected>50
<option>60
<option>70
<option>80
<option>90
</select>
あなたのラッキーナンバーは<input type="text" name="number_luckey" class="text_color" value="0" size="8" maxlength="6">です。
</form>
</body>
</html>
<script type="text/javascript">
// この辺に何かの記述が必要ですよね。
function calculation() {
// 好きな3桁の数字
var number_1 = parseInt(document.calcuation.number_1[document.calcuation.number_1.selectedIndex].text);
// 好きな2桁の数字
var number_2 = parseInt(document.calcuation.number_2[document.calcuation.number_2.selectedIndex].text);
// 独自の計算式(1)
var number_3 = number_2 * 365;
// 独自の計算式(2)
var number_4 = (number_3 / A) - S;
// 独自の計算式(3)
var number_5 = number_4 / B;
// 独自の計算式(4)
var number_6 = number_5 * C;
// 独自の計算式(5)
var number_7 = number_1 * number_2 / 20 * 365;
// 独自の計算式(6)
var number_luckey = number_7 - number_6;
document.calcuation.number_luckey.value = number_luckey;
return;
}
</script>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
質問内容がいろいろあるので、よくわかんないけれど…
とりあえず、サンプルとして。(セレクトのオプションは3個にしてあります)
選択のたびに計算値が表示されるのもどうかと思うけれど、ご質問で提示されているものがそんな仕様みたいなので…
<html>
<head><title>test</title>
<script type="text/javascript">
function prophecy(evt) {
var data = [
['8,24,200/マグロ','2,205,1555/みかん','3,100,180/トマト'],
['7,30,100/サンマ','3,100,1000/メロン','4,200,300/レタス'],
['6,20,300/カツオ','4,300,800/りんご','5,300,500/ピーマン']
];
var t = evt.target || evt.srcElement;
var i, opt, d, s, f = t.form;
if (t.name == 'month') {
//セレクトの連動処理
opt = f.elements['food'].options, opt.length = 0;
d = data[t.selectedIndex];
for (i=0; i<d.length; i++) {
s = d[i].split('/');
opt[opt.length] = new Option(s[1], s[0]);
}
}
//番号計算
s = f.getElementsByTagName('SELECT');
d = s[1].value.split(',');
var num = s[2].value*s[3].value*365/20;
num -= (s[3].value*d[2]*365-s[0].value*d[2]*d[0])/d[0]/d[1];
document.getElementById('lucky').value = parseInt(num);
//チェック用
document.getElementById('check').innerHTML =
's='+s[0].value+', a='+d[0]+', b= '+d[1]+', c='+d[2];
}
</script>
</head>
<body>
<form id="foretell" action="#">
私の誕生月は
<select name="month" onchange="prophecy(event)">
<option value="23">1月
<option value="12">2月
<option value="56">3月
</select><br>
好きな食べ物は
<select name="food" onchange="prophecy(event)">
<option value="8,24,200">マグロ
<option value="2,205,1555">みかん
<option value="3,100,180">トマト
</select>
<p>
私の好きな3桁の数字は
<select name="number_1" onchange="prophecy(event)">
<option value="100">100
<option value="200">200
<option value="300">300
</select><br>
私の好きな2桁の数字は
<select name="number_2" onchange="prophecy(event)">
<option value="10">10
<option value="20">20
<option value="30">30
</select>
<hr>
あなたのラッキーナンバーは
<input type="text" name="lucky" id="lucky" value="" size="8" readonly>
です。
</form>
<hr>
<div id="check"></div>
</body>
</html>
この回答への補足
fujillin様、お返事ありがとうございます。私のミスでうっかりしてたところがありまして、
私の誕生月は
<select name="month" onchange="prophecy(event)">
<option value="23">1月
<option value="12">2月
<option value="56">3月
</select>
↓の箇所のvalue値を2つワンセットにして
私の誕生月は
<select name="month" onchange="prophecy(event)">
<option value="23,10">1月
<option value="12,78">2月
<option value="56,23">3月
</select>
という風にもうひとつ変数Kを追加して
私の例で言いますと
// 独自の計算式(6)
var number_luckey = number_7 - number_6 + K;
つまり最後にラッキーナンバーを出す式にKを足したいのですけど、修正できますでしょうか?最初からこういう風に書けばよかったものの、ミスをして大変申し訳ございませんがよろしくお願いします。
No.1
- 回答日時:
質問がわかりにくいので、問題を切り分けます。
(認識違いがあれば指摘してください。)
1. セレクトメニューの選択肢に応じた連動
2. セレクトメニューで選ばれた項目の値を取得する方法
3. セレクトメニューで選ばれた項目の値が x, y, z の形式である場合に、それぞれを値として取得する方法
それぞれに対応した答えが含まれている例を下に示します。
長くなったので、2つに分けて投稿します。(スクリプト部分は後です。)
例では、2番目のメニューのセットは2つです。buildSecondMenu()のローカル変数であるoptionsという配列に入っています。
1番目のメニューで選ばれたのが偶数月か奇数月かで、2つのセットのうちどちらが選ぶか決めています。もし2番目の選択肢の内容が月ごとに全て異なるのであれば、2番目のメニューのセットは12個用意する必要があります。
---
<html>
<head>
<title>test</title>
<script type="text/javascript">
</script>
</head>
<body>
<form action="#">
<p>
<select id="s0" name="s0">
<option value="23" selected="selected">1月</option>
<option value="12">2月</option>
<option value="56">3月</option>
<option value="89">4月</option>
<option value="5">5月</option>
<option value="88">6月</option>
<option value="70">7月</option>
<option value="1">8月</option>
<option value="2">9月</option>
<option value="3">10月</option>
<option value="4">11月</option>
<option value="5">12月</option>
</select>
<select id="s1" name="s1"></select>
</p>
<p>
<input id="display" type="button" value="結果表示" />
</p>
</form>
<p>計算結果は<span id="result">***</span>です。</p>
</body>
</html>
この回答への補足
kaorine様、ありがとうございます。問題の切り分けで、1,2,3すべて私の質問に対して認識違いはありません。
また、2番目の選択肢の内容が月ごとに全て異なるので、その方向でお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript 1度きりではなく、繰り返し、挙動が変わるようにしていただきたいです。 1 2022/07/03 15:50
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
Selectボックスの一覧表示方法
-
selectを変更不可にしたい
-
検索窓とプルダウンメニュー機...
-
ラジオボタンとプルダウンを連...
-
全てのselect要素をデフォルト...
-
【JavaScript】プルダウンで数...
-
子ウインドウから親ウインドウ...
-
select要素のvalueを配列で取得...
-
javascriptでセレクトボックス...
-
JavaScriptで<select>の<option...
-
複数のプルダウンを1つにまとめ...
-
selectのすべての値を送信する方法
-
プルダウンメニューに連動する...
-
<input>の選択肢をプルダウンメ...
-
スマホのフォームでのselect複...
-
<select> をmultiple にしてい...
-
同じ名前のセレクトがある場合...
-
セレクトボタンで特定の項目で...
-
return falseが効かない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptでセレクトボックス...
-
selectを変更不可にしたい
-
全てのselect要素をデフォルト...
-
<input>の選択肢をプルダウンメ...
-
Selectボックスの一覧表示方法
-
プルダウン選択を変更すると、...
-
セレクトボックスで配列を呼び...
-
JavaScriptで<select>の<option...
-
プルダウンのoptionの表示・非...
-
select要素のvalueを配列で取得...
-
【javascript】連想配列からセ...
-
ラジオボタンとプルダウンを連...
-
同じ名前のセレクトがある場合...
-
selectボックスの選択結果を変...
-
プルダウンの値によって活性・...
-
javascriptで合計金額を算出し...
-
プルダウンメニューに連動する...
-
リストボックス内の重複したも...
-
VBScriptでHTMLのセレクトボッ...
-
連想配列を使ってコンボボック...
おすすめ情報