LBJ236と申します。
現在、計算問題のページを作成しているのですが、form内に入力した解答とランダムな6つの数値の合計との比較(合っているのか)が出来なく、手詰まりになってしまっています。
私なりにソースコードを書いたので見て頂けると幸いです。
<body>
<p class = "main_p1">
<span id="t1">0</span>+<span id="t2">0</span>+
<span id="t3">0</span>+<span id="t4">0</span>+
<span id="t5">0</span>+<span id="t6">0</span>=
</p>
<p class = "main_p2"><input id="b1" type="button" value="start" onclick="cb1()">
<input id="input">
<span id="message">
<script>
input.addEventListener('keydown', (e) => {
if(e.key === 'Enter') {
document.getElementById("t1").textContent=(Random(1, 9));
document.getElementById("t2").textContent=(Random(1, 9));
document.getElementById("t3").textContent=(Random(1, 9));
document.getElementById("t4").textContent=(Random(1, 9));
document.getElementById("t5").textContent=(Random(1, 9));
document.getElementById("t6").textContent=(Random(1, 9));
//var input = document.getElementById("input").value;
//var a = parseInt(input, 10);
//var result = document.getElementById("result");
//result.value = a;
input.value = "";
}
})
</script>
</body>
よろしければ上記の内容で製作する方法を教えていただけませんでしょうか?
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
ユーザーの動きがよく分からなかったのですが、
1.「start」ボタンを押す
2.ランダムな6個の数字(1以上9以下)が決まる
3.入力欄に、6個の和を入力する
4.Enterキーを押すか、「比較」ボタンを押す
5.比較結果のメッセージが表示される
というものと仮定して、作ってみました。
間違っていたらすみません。
<body>
<p class="main_p1">
<span id="t1">0</span>+<span id="t2">0</span>+
<span id="t3">0</span>+<span id="t4">0</span>+
<span id="t5">0</span>+<span id="t6">0</span>=
</p>
<p class="main_p2">
<input id="b1" type="button" value="start" onclick="cb1()">
</p>
<p class="main_p2">
<input id="input" type="text" />
<input id="b2" type="button" value="比較" onclick="compare()">
</p>
<p id="message"></p>
<script>
let n1,n2,n3,n4,n5,n6;
let result = 0;
let message = document.getElementById('message');
let input = document.getElementById('input');
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {compare();}
});
function cb1() {
n1 = Math.floor(Math.random() * 9) + 1;
n2 = Math.floor(Math.random() * 9) + 1;
n3 = Math.floor(Math.random() * 9) + 1;
n4 = Math.floor(Math.random() * 9) + 1;
n5 = Math.floor(Math.random() * 9) + 1;
n6 = Math.floor(Math.random() * 9) + 1;
result = n1 + n2 + n3 + n4 + n5 + n6;
document.getElementById("t1").textContent = n1;
document.getElementById("t2").textContent = n2;
document.getElementById("t3").textContent = n3;
document.getElementById("t4").textContent = n4;
document.getElementById("t5").textContent = n5;
document.getElementById("t6").textContent = n6;
}
function compare(){
if (result === parseInt(input.value)) {
message.textContent = '合っています!';
} else if (result < parseInt(input.value)) {
message.textContent = 'もっと小さいです!';
} else if (result > parseInt(input.value)) {
message.textContent = 'もっと大きいです!';
}else{
message.textContent = '比較できません!';
}
}
</script>
</body>
拙い説明文の中で意図を汲み取っていただいてありがとうございます。
今の目標は、sukitaroさんに作っていただいた機能にエンターを押すことで再度ランダムの数字を表示し、一問目同様に正解か不正解を表示するというものです。
凄い雑な文章からここまでのものを作っていただいて本当にありがとうございます!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
innerHTML内では改行は禁止?
-
javaScriptの変数をJavaの変数...
-
クリックさせたいが、click()が...
-
ボタンかリンクをクリックする...
-
JavaScriptのfileオブジェクト...
-
受け取ったパラメータが文字化け
-
formのfileの値をhiddenでも持...
-
javascriptで作成されたテーブ...
-
ボタンをクリックして文字を置...
-
追加ボタンを押した際に ok ボ...
-
jQueryでshow/hideが上手く行か...
-
ボタンで配列に代入
-
onclickが動作しない
-
return trueとreturn falseの用...
-
value内に変数を入れたい
-
プルダウン 項目が多いので先頭...
-
【jQuery】input nameの文字列...
-
フォームが空欄の時にフォーム...
-
tableの任意行にfocusをあてる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
追加ボタンを押した際に ok ボ...
-
クリックさせたいが、click()が...
-
onclickが動作しない
-
ボタンかリンクをクリックする...
-
javaScriptの変数をJavaの変数...
-
formのfileの値をhiddenでも持...
-
JSのボタンを複数う使うには
-
JavaScriptのfileオブジェクト...
-
innerHTML内では改行は禁止?
-
開いた子ウィンドウにあるボタ...
-
BackSpaceしたい(QNo.2734284の...
-
VB.NETで<Input>タグ、<text...
-
オンクリックで現在時刻の取得→...
-
JQueryでfunctionに引数としてI...
-
複数のテキストボックスの値の...
-
onClickがinput type="image"だ...
-
クリック→テキストボックスに追加
-
Javascriptで'(シングルクォー...
-
テキストフィールド未入力の場...
おすすめ情報
エンターを押すことで60回ほどランダムの数字を表示し、一問目同様に正解か不正解を表示するというものです。