LoginSignup
limemint
@limemint (斉藤 貴博)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

キッチンタイマー（カウントダウンタイマー）の実装

Q&AClosed
HTMLJavaScript

解決したいこと

キッチンタイマー（カウントダウンタイマー）を作成したいと思っています。
javascriptで、打った数字をconsoleに出力することはできるのですが、HTMLの数字を液晶部分（便宜上こう表現しますがトップのところ）に表示させるにはどうしたらいいのでしょうか？

例えば、「1111」と4回押せば「11:11」と表示されて、「11111」と5回押せば同じく「11:11」と表示されるが、5回目の1は無効になる、という感じです。
あと、これはまだ上記のことが解決してからだとは思っているのですが、「START」ボタンを押せば、カウントダウンが始まり、「STOP/RESET」を押せばその時点で時は止まり、再度「STOP/RESET」を押せば「00:00」になるというコードを作りたいです。ぜひご教授いただければと思います。よろしくお願いします。

<!DOCTYPE html>
<html>
    <head>
        <title>タイマー</title>
        <meta name="description" content="タイマーアプリ">
        <meta charset="utf-8">
        <body>
            <h1><span id="the timer">00:00</span></h1>
            <form>
                <input type="button" id="number1" value="1">
                <input type="button" id="number2" value="2">
                <input type="button" id="number3" value="3"><br>
                <input type="button" id="number4" value="4">
                <input type="button" id="number5" value="5">
                <input type="button" id="number6" value="6"><br>
                <input type="button" id="number7" value="7">
                <input type="button" id="number8" value="8">
                <input type="button" id="number9" value="9"><br>
                <input type="button" id="stopresetBtn" value="STOP/RESET">
                <input type="button" id="number0" value="0">
                <input type="button" id="startBtn" value="START">
                
            </form>
        </body>
    </head>
    
</html>

### 以下javascript
    ```
const btnOne = document.getElementById('number1');
btnOne.addEventListener('click', () => {
    console.log('1');
});
const btnTwo = document.getElementById('number2');
btnTwo.addEventListener('click', () => {
    console.log('2');
});
const btnThree = document.getElementById('number3');
btnThree.addEventListener('click', () => {
    console.log('3');
});
const btnFour = document.getElementById('number4');
btnFour.addEventListener('click', () => {
    console.log('4');
});
const btnFive = document.getElementById('number5');
btnFive.addEventListener('click', () => {
    console.log('5');
});
const btnSix = document.getElementById('number6');
btnSix.addEventListener('click', () => {
    console.log('6');
});
const btnSeven = document.getElementById('number7');
btnSeven.addEventListener('click', () => {
    console.log('7');
});
const btnEight = document.getElementById('number8');
btnEight.addEventListener('click', () => {
    console.log('8');
});
const btnNine = document.getElementById('number9');
btnNine.addEventListener('click', () => {
    console.log('9');
});
const btnZero = document.getElementById('number0');
btnZero.addEventListener('click', () => {
    console.log('0');
});

例）

```ruby
def greet
  puts Hello World
end

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。

0

4Answer

ushi_osushi
@ushi_osushi

回答者ではないですが下記の質問に答えたいと思います。
少し時間が経ってしまっていますがまだ未解決でしょうか？

追加の質問ですが、

document.querySelector('#keys').addEventListener('click', ev =>

のところで、「ev」とは何のことでしょうか？
また、次の行で定数ｔに代入した　「 ev.target;」　はどのように理解すればいいのでしょうか？
解説いただけたらと思います。

addEventListenerの第二引数で関数を宣言して、その宣言した関数の仮引数にevという名前を付けています。

ちなみに仮引数はevでなくてもご自身で好きな名称を設定することができます。
sushiでもtaroでも挙動に影響は出ません。
この場合evと命名されていますが、eventの略だと思われます。
実際はeと略されることがほとんどです。

では、このevの中身は何かというとeventオブジェクトです。
もしオブジェクトがわからない場合は{}で囲われている入れ物だとお考えください。

console.log(ev)としてコンソールでevを確認してみると、PointerEventというオブジェクトが返ってきます。

スクリーンショット 2022-08-18 13.35.00.png

このPointerEventの中身を見てみると、何やらたくさん出てきますがその中にtargetというプロパティが存在するのが確認できます。
更にtargetの中身を見てみると、クリックしたボタンの要素が入っていることがわかります。

つまり、
ev は PointerEventというオブジェクト
target は クリックした要素
となります。

オブジェクトの中にあるプロパティにアクセスするときは、オブジェクト名とプロパティ名を.(ドット)で繋げる必要があるので、ev.targetとしています。

例としてRESETボタンをクリックした時、ev.targetの中身は<button>RESET</button>となります。1をクリックした時のev.targetの中身は<button>1</button>です。

こちらもconsole.log(ev.target)としてコンソールで表示してみると中身が確認できます。

まとめると、
evとは仮引数でeventの略です。中身に入ってくるのはPointerEventというeventオブジェクトです。
ev.targetはPointerEventの中のtargetプロパティのことで、中身はクリックした要素のHTMLです。

「addEventListener e」で検索するといくつか解説記事が出てきますので、より理解を深めたい場合は調べてみてください。

1

Comments

  1. @limemint

    Questioner
    ありがとうございます！
    まだ解決していなかったのですが、そろそろクローズしようと思っていたところでした。
    大変助かりました。
    丁寧にご解説いただきまして本当にありがとうございます。
This answer has been deleted for violation of our Terms of Service.
br9244
@br9244

「1111」と4回押せば「11:11」と表示されて、「11111」と5回押せば同じく「11:11」と表示されるが、5回目の1は無効になる、という感じです。

一例ですが、4桁分の文字列を保持する変数を用意しておいて、数字キーを押したらその数字を末尾に追加した上で下4桁のみを切り出し、表示する際に中間に:を挿入する、という方法が考えられます。

sample.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<style>
#view {
  border: 2px black solid;
  width: 80px;
}
</style>
</head>
<body>
<div id='view'>00:00</div>
<div id='keys'>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
  <button>0</button>
</div>
<script>
let buffer = '0000';

document.querySelector('#keys').addEventListener('click', ev => {
  const t = ev.target;
  if(t.tagName !== 'BUTTON') return;
  const num = t.textContent.trim();
  buffer = `${buffer}${num}`.slice(-4);
  document.querySelector('#view').textContent = buffer.replace(/^(..)/, '$1:');
});
</script>
</body>
</html>
0

Comments

  1. @limemint

    Questioner
    ご丁寧な回答、本当にありがとうございます。
    大変参考になりました。

  2. @limemint

    Questioner
    こちらのコメント欄に追加の質問をしてもよろしいでしょうか？
    このたびは迅速な回答ありがとうございます。私はプログラミングを学び始めて2～3ヶ月程度で、そんな私の理解度をよく把握してくださっているようなご回答で正直びっくりしています。
    追加の質問ですが、

    document.querySelector('#keys').addEventListener('click', ev =>

    のところで、「ev」とは何のことでしょうか？
    また、次の行で定数ｔに代入した　「 ev.target;」　はどのように理解すればいいのでしょうか？
    解説いただけたらと思います。
    どうぞよろしくお願いいたします。
br9244
@br9244

私の最初の回答は質問の意味を勘違いしていたかもしれません。
4桁分入力されたらそれ以降の入力は無効にしたいという意図であれば、先頭が0の間のみ数字の入力を有効にするような仕組みにすればいいかと思います。

sample.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<style>
#view {
  border: 2px black solid;
  width: 80px;
}
</style>
</head>
<body>
<div id='view'>00:00</div>
<div id='keys'>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
  <button>0</button>
  <button>RESET</button>
</div>
<script>
let buffer = '0000';

document.querySelector('#keys').addEventListener('click', ev => {
  const t = ev.target;
  if(t.tagName !== 'BUTTON') return;
  const value = t.textContent.trim();
  if(/^\d$/.test(value) && buffer[0] === '0') {
    buffer = `${buffer}${value}`.slice(-4);
  }
  else if(value === 'RESET') {
    buffer = '0000';
  }
  document.querySelector('#view').textContent = buffer.replace(/^(..)/, '$1:');
});
</script>
</body>
</html>
0

Comments

  1. @limemint

    Questioner
    ご丁寧な回答、本当にありがとうございます。
    大変参考になりました。

Your answer might help someone💌

LoginSign Up

Popular Questions