タカモリ
処理の途中で、1秒の更新にforを利用している部分がよくない気がしたので、少し作り直してみました!
なお、僕がセミコロン付けない派なのでソースに統一性がないので申し訳ないのですが、もし参考になるのであれば使ってみてください?♂️
<html>
<body>
<p id="odai" style="width:500px; height:60px; padding-top:45px; border:solid 2px; text-align:center;"></p>
<form name="form" onsubmit="next(); return false">
<p style="text-indent:50px;">↓ここに入力</p>
<input type="text" id="user" style="width:400px; height:30px; border:solid 2px; margin-left:50px; text-align:center;"></input>
<br>
<br>
<input type="button" id="button" onclick="next()" style="width:60px; height:30px; margin-left:200px;"></input>
</form>
<p id="timer"></p>
<p id="kekka"></p>
</body>
</html>
<script>
// 要素の取得
getElements()
odai.innerText = 'startボタンを押してください。'
button.value = 'start'
let counter = null
let questionNumber = 1
// 初期設定
init()
// ボタン押下時
function next() {
/**
* start押下
*/
if (button.value === 'start') {
button.value = 'ok'
user.disabled = false
return setOdai()
}
/**
* ok押下 && 正解時
*/
if (odai.textContent === user.value) {
user.value = ''
time = 10
clearInterval(counter)
if (questionNumber === 10) {
return clearEnd()
}
questionNumber++
return setOdai()
}
/**
* ok押下 && 間違い時
* 現在処理なし
*/
}
function getElements() {
const odai = document.getElementById("odai"); //お題の取得
const user = document.getElementById("user"); //userの記入欄取得
const button = document.getElementById("button"); //okボタンの取得
const kekka = document.getElementById("kekka"); //結果の取得
const timer = document.getElementById("timer"); //タイマーの取得
}
function init() {
time = 10
clearInterval(counter)
user.disabled = true
button.value = 'start'
user.value = ""
questionNumber = 1
}
//お題ランダム表示
function setOdai() {
let box = [ //配列でお題を作成
"キャンディ",
"チョコ",
"グミ",
"クッキー",
"スナック"
];
let rnd = Math.floor(Math.random() * (box.length -1)); //boxの配列から1個少ない数を最大値とした乱数を作成 box.lengthはboxの中身分だけという意味
tmp = box[rnd]; //変数tmpにboxの添字で[rnd]を入れる→ランダムに文章選択、文字列として利用できる
box.splice(rnd,1); //rndから該当する配列をspliceで消去.表示
odai.textContent = tmp; //tmpをお題欄に出力
user.value = ""; //form内の要素をリセット
startCountdown()
}
function startCountdown() {
counter = setInterval(() => {
timer.textContent ='制限時間:' + time + '秒'
if (time === 0) {
return badEnd()
}
time--
}, 1000)
}
function badEnd() {
odai.innerText = '残念!'
init()
}
function clearEnd() {
odai.innerText = '素晴らしい!'
init()
}
</script>