Q&A
javaやjspは今回不要では？
前提・実現したいこと
初心者＆初質問です。拙い部分はご容赦ください。
課題でキッチンタイマーのウェブアプリを作っています。アラーム状態の時に分数と秒数ボタンが作動しないようにjavascriptで設定したいです。
該当のソースコード
javascript
1var min; 2var min10; 3var min5; 4var min3; 5var min1; 6var m = 0; 7var sec; 8var sec10; 9var s = 0; 10var start; 11var state = 0; 12var stop; 13var alarm; 14 15window.onload = startup; 16 17function startup() { 18 min = document.getElementById("min"); 19 min10 = document.getElementById("min10"); 20 min10.onclick = min10click; 21 min5 = document.getElementById("min5"); 22 min5.onclick = min5click; 23 min3 = document.getElementById("min3"); 24 min3.onclick = min3click; 25 min1 = document.getElementById("min1"); 26 min1.onclick = min1click; 27 sec = document.getElementById("sec"); 28 sec10 = document.getElementById("sec10"); 29 sec10.onclick = sec10click; 30 start = document.getElementById("start"); 31 start.onclick = startclick; 32 stop = document.getElementById("stop"); 33 stop.onclick = stopclick; 34 alarm = new Audio(); 35 alarm.src = "sound/school-chime1.mp3"; 36} 37 38function min10click() { 39 if (m < 90) { 40 m = m + 10; 41 } 42 min.innerHTML = m; 43} 44 45function min5click() { 46 if (m < 95) { 47 m = m + 5; 48 } 49 min.innerHTML = m; 50} 51 52function min3click() { 53 if (m < 97) { 54 m = m + 3; 55 } 56 min.innerHTML = m; 57} 58 59function min1click() { 60 if (m < 99) { 61 m = m + 1; 62 } 63 min.innerHTML = m; 64} 65 66function sec10click() { 67 if (s < 50) { 68 s = s + 10; 69 } 70 sec.innerHTML = s; 71} 72 73function countdown() { 74 if (state != 1) { 75 return; 76 } 77 if (m == 0 && s == 0) { 78 alarm.loop = true; 79 alarm.currentTime = 0; 80 alarm.play(); 81 state = 2; 82 return; 83 } 84 if (s > 0) { 85 s = s - 1; 86 } else { 87 m = m - 1; 88 s = 59; 89 } 90 min.innerHTML = m; 91 sec.innerHTML = s; 92 setTimeout(countdown, 1000); 93} 94 95function startclick() { 96 if (state == 0) { 97 state = 1; 98 countdown(); 99 } 100} 101 102function stopclick() { 103 if (state == 0) { 104 m = 0; 105 s = 0; 106 min.innerHTML = m; 107 sec.innerHTML = s; 108 } 109 if (state == 1) { 110 state = 0; 111 } 112 if (state == 2) { 113 alarm.pause(); 114 state = 0; 115 } 116}
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>キッチンタイマー</title> 6 <link rel="stylesheet" href="css/timer.css"> 7 </head> 8 <body> 9 <div id="display"> 10 <span id="min" class="number">00</span> 11 <span class="text">分</span> 12 <span id="sec" class="number">00</span> 13 <span class="text">秒</span> 14 </div> 15 <div id="settings"> 16 <span id="min10" class="button">10分</span> 17 <span id="min5" class="button">5分</span> 18 <span id="min3" class="button">3分</span> 19 <span id="min1" class="button">1分</span> 20 <span id="sec10" class="button">10秒</span> 21 </div> 22 <div id="panel"> 23 <span id="stop" class="button">ストップ・リセット</span> 24 <span id="start" class="button">スタート</span> 25 </div> 26 <script src="js/timer.js"></script> 27 </body> 28</html>
試したこと
いろいろなサイトにボタンの非活性という項目でdisabledを設定すればよいと書かれていたため試してみましたがうまくいきませんでした
補足情報（FW/ツールのバージョンなど）
とりあえずつけておけばいいと思っている節がありました、すみませんでした
disabled書いてなくない？
どうにも機能しなかったので消去しましたが、間違いを指摘されて直すということを考えると消去しないほうが良かったですね。反省と熟考したのちdisabledがあるものを再掲したいと思います。
分の表示が00から始まっていますが、これは99が上限ということでよろしいのですか？
「機能しない」もいろいろあるので、エラーなど確認して起きている現象をそのまま提示されたほうが良いかと思います。
分数は99が上限となっています。秒数の上限は秒数が50より大きいときに10秒追加するボタンが使えないことになっているため疑似的に59になっています。
m.ts10806さん
そうですね、もう少し自分の方で考えたのちdisabledと一緒に機能しないの内容も再掲します。
ただ、
>担当の教授には最新のjavascriptの操作を教えていただきました。
どこが最新？と疑問なコードではあります。
今期がjavascriptを使う初の機会であったため何が良いのか何が最新なのかはよくわからないです。
ちなみにdisabledの書き方が間違ってるかどうかはjsファイルの先頭辺りに単発で書けば分かりますよ
再確認、99分が上限の場合90分に10分足した場合
99分に丸めるのか、00分に戻すのでしょうか？
同様に秒についても50秒に10秒足す場合、
59秒に丸めるのか、00秒に戻すのでしょうか？
（逆にもどせないと押しすぎた場合つねにリセットしないと行けないので面倒な気がします）
hentaimanさん
そうなんですね！ありがとうございます、覚えておきます。
yambejpさん
設定ボタン各種に99（秒数なら59）を越えないよう、
10分ボタンの場合は90分より大きい時＋10できないことになっています
function min10click() {
if (m < 90) {
m = m + 10;
}
min.innerHTML = m;
} これですね
つまり００に戻りません。
言われるまで考えもしなかったですが確かにキッチンタイマーって上限越えたら００に戻りますね・・
提出期限が明日中なので時間があれば考えてみます、ありがとうございます。
>何が良いのか何が最新なのかはよくわからないです。
でしたら特に根拠もなく何の情報も伝えない文章はない方が良いです。書いた意図も我々他人には不明です。
m.ts10806さん
わかりました、以後気を付けます。
混乱させる情報を与えてしまいすみませんでした。
沢山の修正意見等ありがとうございます。今回の質問は相手に理解されづらいものであると理解したうえで、他の質問の機会に改善したいと思います。
この問題についてですが分数秒数を設定するfunction ○○click()のところに
if (state == 2){min10.disabled();}
（min10clickの場合、state==2はアラームがなっている状態）
を追加することで解決しました。私自身の知識の浅さと応用力の弱さにより皆さんの時間をとらせてしまったことに謝罪すると同時に、質問について考え解決策を出そうとしていただいたことに感謝します。
今後また質問する機会がありましたら同じように親切にしていただけると嬉しく思います。
ちなみに今回の解決策ではアラーム時では表記上の変化はないようですが、アラーム時に秒数分数ボタンを押してアラームを停止、再度分数秒数ボタンを押すとアラーム時に押していた分だけ時間が表示されました。今度はこの問題について考えていく予定です。
回答1件
0
ベストアンサー
spanを使った疑似ボタンだとdisabledなどは意味がありません。
たとえばdisabledクラスのようなモノをつけて、その属性がついている場合
挙動をとめる処理が必要でしょう
投稿2020/07/27 02:28
総合スコア115010
spanを別の何かに置き換えれば良いということでしょうか
今回の場合は分数秒数を設定するボタンとスタートとストップボタンのクラスをbuttonでまとめるのではなく分数秒数には○○、スタートとストップには△△と分けて処理すれば良いということでしょうか
具体的にはこんな感じ
<style>
.disabled{opacity:0.5}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('#change').addEventListener('click',e=>{
document.querySelector('#hoge').classList.toggle('disabled');
});
document.querySelector('#hoge').addEventListener('click',e=>{
if(e.target.classList.contains('disabled')) return false;
console.log("hoge");
});
});
</script>
<div id="change">活性・非活性変更</div>
<span id="hoge">hoge</span>
ありがとうございます！
これを採用すると特定の条件下で非活性が働くのですね。
まだ基礎的なところしか学習していなくて理解に難い部分もありますが、採用できるような調整と学習を進めていきたいと思います。
あなたの回答
tips
プレビュー
