Q&A
＞monaka
Monaca では。
https://teratail.com/tags/Monaca
前提・実現したいこと
開発環境はmonacaです。Javascript、CSS、html5を使っています。
入力した数字を合計してその数字に合せてその人に合ったお米の品種をおすすめする機能を作っています。
下のような感じにしたいです
「メニューを選んでください」
1 おにぎり
2 餃子
3 サバの味噌煮
4 から揚げ
5 肉じゃが
6 豚のしょうが焼き
7 カレー
「お米の硬さを選んでください」
0 しっかり硬め
10 ほどほどの硬さ
20 柔らかしっとり
30 もっちり
メニューの番号を入力してください
1
＋
お米の硬さを選んで番号を入力してください
30
「診断する」→ここをクリックしたら下におすすめのお米の品種が出てくる
あなたにおすすめのお米の品種は
ゆめぴりかです
ボールドテキスト
発生している問題・エラーメッセージ
スイッチ文はhtmlの中に書くのかJavascriptの中に書くのかいまいち分かりません
スイッチ文をどうにかして活用して条件分岐させたいです
www/script.js:14 iPhone/14.4.2ReferenceError: Can't find variable: total www/script.js:14 iPhone/14.4.2ReferenceError: Can't find variable: total
該当のソースコード
Javascript
1function sum(){ 2 //1つ目の数字を取得して変数に代入 3 var num1 = document.getElementById('num1').value; 4 5 //2つ目の数字を取得して変数に代入 6 var num2 = document.getElementById('num2').value; 7 8 //2つの数字を使って計算して計算結果を変数に代入 9 var total = parseInt(num1) + parseInt(num2); 10 11 //計算結果を答えを表示するパーツに表示する 12 document.getElementById('total').value = total; 13} 14 switch(total){ 15 case 31: 16 case 34: 17 case 36: 18 case 37: 19 console.log("【ゆめぴりか】粘りが強く、かめばかむほど甘さを感じ、冷めても美味しい。"); 20 break; 21 22 case 2: 23 case 20: 24 case 16: 25 case 27: 26 console.log("【ななつぼし】粒はしっかりとしており、ほどよい粘りと噛んだ時には甘みが広がるのが特徴で、比較的さっぱりとした口当たりなので、油っぽい食事とよく合う。ななつぼしの大きな特徴の1つは、冷めても味や香りが飛びにくい。"); 27 break; 28 29 case 2: 30 case 30: 31 case 15: 32 case 6: 33 case 7: 34 console.log("【あきたこまち】やや硬めだが、十分に咀嚼すると粘りを感じ、甘味もにじみ出てくる。やや濃い味の和食にあう。"); 35 break; 36 37 case 32: 38 case 33: 39 case 24: 40 console.log("【はえぬき】ふっくらとした炊きあがりで、もっちりした歯ごたえのある食感。やや柔らか目で、味の濃いおかずも包み込む力がある。"); 41 break; 42 43 case 11: 44 case 22: 45 case 23: 46 case 25: 47 console.log("【コシヒカリ】コシがあり、粘りと甘さを楽しめ、和洋問わずに料理にあう。"); 48 break; 49 50 case 21: 51 case 35: 52 case 26: 53 console.log("【おいでまい】色が白く、粒の形が美しいのが特徴。粘りも程よくあり、口の中で感じる食感が気持ちいい。"); 54 break; 55 56 case 1: 57 case 40: 58 case 14: 59 case 5: 60 case 17: 61 console.log("【雪若丸】汁を吸ってもお米がべちゃっとならず、最後まで歯ごたえ良く食べられる。お米の甘みもあるが、後に残らない上品な甘さ"); 62 break; 63 64 default: //すべてのケースに当てはまらないとき 65 console.log("表示されている番号の中から選んでください"); 66 break; 67 } 68
html
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <link rel="stylesheet" href="components/loader.css"> 9 <link rel="stylesheet" href="css/style.css"> 10 <script type="text/javascript" src="script.js"></script> 11 <script> 12 </script> 13 <script> 14 function onClickButton() { 15 let text_name = document.getElementById("name"); 16 console.log(`入力値: ${text_name.value}`); 17 let num1=parseInt(text_name.value); 18 19 let text_name1 = document.getElementById("name1"); 20 console.log(`入力値: ${text_name1.value}`); 21 let num2=parseInt(text_name1.value); 22 23 let result = document.getElementById("result"); 24 //診断結果 25 result.innerHTML = ``; 26 } 27 28</script> 29</head> 30<body> 31 <p class="maru0">お米の品種診断</p> 32 <h3 div class="maru1">あなた好みのお米の品種を教えます</div></h3> 33 <div class="maru2">好きなメニューの番号とお米の硬さを選んで下さい</div> 34 <div class="group"> 35 <table> 36 <tr><th>番号</th><th>メニュー</th><th>番号</th><th>お米の硬さ</th></tr> 37 <tr><td>①</td><td>おにぎり</td><td>0</td><td>しっかり硬め</td></tr> 38 <tr><td>②</td><td>餃子</td><td>10</td><td>普通の硬さ</td></tr> 39 <tr><td>③</td><td>鯖の味噌煮</td><td>20</td><td>柔らかめ</td></tr> 40 <tr><td>④</td><td>唐揚げ</td><td>30</td><td>もっちり</td></tr> 41 <tr><td>⑤</td><td>肉じゃが</td> 42 <tr><td>⑥</td><td>豚の生姜焼き</td> 43 <tr><td>⑦</td><td>カレー</td> 44</table> 45 46 <input id="name" type="text" placeholder="食べたい食事の番号を入力してね"> 47 <div class="text_underline"></div> 48 <h2 style="text-align:center">＋</h2> 49 <input id="name1" type="text1" placeholder="お米の硬さを番号で入力してね"> 50 <div class="text_underline"></div> 51</div> 52 53 <h2 style="text-align:center"><button onclick="onClickButton();" class="btn btn--yellow btn--cubic">診断</button></h2> 54 55 <div id="result">診断結果</div> 56</body> 57</html> 58 59
試したこと
まだまだ不完全なのですが、
result.innerHTML = あなたにおすすめのお米の品種は <span class="kekka"> ${num1+num2} </span>;
}
このコードで結果を表示しています
結果表示させたいときにJavascriptの中のスイッチ文とどのように連携することができませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
ただ、いずれにしても
switchが実行されるときにtotalという変数は定義されてませんね。
申し訳ございません、スペルミスしてしまいました
ご指摘ありがとうございます
回答3件
0
ベストアンサー
たぶんこういうことをしたいのかな
javascript
1function sum(){ 2 //1つ目の数字を取得して変数に代入 3 const num1 = document.getElementById('num1').value; 4 5 //2つ目の数字を取得して変数に代入 6 const num2 = document.getElementById('num2').value; 7 8 //2つの数字を使って計算して計算結果を変数に代入 9 const total = parseInt(num1) + parseInt(num2); 10 11 //計算結果を答えを表示するパーツに表示する 12 document.getElementById('total').value = hoge(total); 13} 14 15function hoge(total) { 16 switch(total){ 17 case 31: 18 case 34: 19 case 36: 20 case 37: 21 return "【ゆめぴりか】粘りが強く、かめばかむほど甘さを感じ、冷めても美味しい。"; 22 case 2: 23//(略) 24 default: //すべてのケースに当てはまらないとき 25 return "表示されている番号の中から選んでください"; 26 } 27}
余談ですが、table で表示して数字を iniput に入力させるより
select で表示して選択させるとエラーチェックとか楽ですよ。
投稿2021/04/29 08:10
総合スコア7464
0
sum() の中に
var total =
があり、switch文はその外側にあるので、totalを認識できません。
sum()の外側に
javascript
1var total;
を置いて、内側のtotalはvarを外します。
javascript
1 2 //var total = parseInt(num1) + parseInt(num2); 3 total = parseInt(num1) + parseInt(num2);
投稿2021/04/29 07:37
総合スコア72
あなたの回答
tips
プレビュー
