JavaScriptのif文の条件をstyle.opacity===0.5にしたのですがif文中のreturn処理をしてくれません。

Question

以下の画像のようなstop,resetの三つのボタンがあるストップウォッチを作っています。しかし、startを三回押したらstopを三回押さないと止まってくれないといったように、同じボタンを連打することで問題が起きてしまいます。その問題を解決するために、opacity===0.5のときはreturnでそれ以降の処理を行わないようにといったif文を書くことで、opacity0.5のボタンは押せなくするという対策を試みたのですが、全く無意味で連打できてしまいます。なぜうまくいかないのでしょうか？ご教授お願いいたします。

const start = document.getElementById('start');
  const stop = document.getElementById('stop');
  const reset = document.getElementById('reset');
  let startTime;
  let timeoutId;
  let elapsedTime = 0;
  function countUp () {
    const d = new Date(Date.now() - startTime + elapsedTime);
    const m = String(d.getMinutes()).padStart(2,'0');
    const s = String(d.getSeconds()).padStart(2,'0');
    const ms = String(d.getMilliseconds()).padStart(3,'0');
    timer.textContent = `${m}:${s}:${ms}`;
    timeoutId = setTimeout(countUp,10);
  }
  
  stop.style.opacity = 0.5;
  reset.style.opacity = 0.5; 
  
  start.addEventListener('click',() => {
    if(start.style.opacity === 0.5) {
      return;
    }
    startTime = Date.now();
    countUp();
    start.style.opacity = 0.5;
    stop.style.opacity = 1;
    reset.style.opacity = 0.5; 
  });
  stop.addEventListener('click',() => {
    if(stop.style.opacity === 0.5) {
      return;
    }
    clearTimeout(timeoutId);
    elapsedTime += Date.now() - startTime;
    start.style.opacity = 1;
    stop.style.opacity = 0.5;
    reset.style.opacity = 1; 
  });
  reset.addEventListener('click',() => {
    if(reset.style.opacity === 0.5) {
      return;
    }
    timer.textContent ="00:00.000";
    elapsedTime = 0;
    start.style.opacity = 1;
    stop.style.opacity = 0.5;
    reset.style.opacity = 0.5; 
  });

Answer 1

すでにベストアンサーは出ているので別案ですが、start.style.opacity = 0.5;を使用するよりもstart.disabled = true;を使用するほうが良いかと思います。
見た目はちゃんと「押せないボタン」に変わる上、ボタン要素がdisabledの間はクリックしてもclickイベントは起こらないのでifの条件分岐自体が不要となります。

Comments

[FreddyMarcury]

気づくのが遅れてしまい申し訳ございませんでした。ベストアンサー後なのにもかかわらず回答してくださりありがとうございます！確かこのボタンは<input type = button>を使ったわけではなく、paddingを使って見た目をボタン風にしただけでしたので、disabledが使えなかった気がします。もう記憶が少し薄れているのですが...そしてinputを使わずボタンを作ったのにも何か理由があったのですが、ちょっと思い出せないのですみません。なんにせよありがとうございます！

Answer 2

element.style[property-name] は文字列になるからだと思います。
element.style.opacity === '0.5' で解決するか試してみてください。

parseFloat(element.style.opacity) === 0.5 の方がいいかも…。

Comments

[FreddyMarcury]

できました！完全に盲点でした...本当にありがとうございました。