Неправильный вывод цифр на дисплее

[Vanya_228]

Незнаю, возможно дело в неправильной расстановки функций/констант, но у меня при нажатии кнопки на калькуляторе цифры происходит баг и выводиться сначана “0.” и со второго клика уже нужное число.

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    const key = e.target
    const action = key.dataset.action
    const keyContent = key.textContent
    const displayedNum = display.textContent
 

    
  if (!action) {
    if (displayedNum === '0') {
      display.textContent = keyContent
    } else {
      display.textContent = displayedNum + keyContent
    }
  }  

  if (action === 'decimal') {
    display.textContent = displayedNum + '.'
  }

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
){
  key.classList.add('is-depressed')
}
  const previousKeyType = calculator.dataset.previousKeyType 
  if (!action) {
    if (displayedNum === '0' || previousKeyType === 'operator') {
      display.textContent = keyContent
    } else {
      display.textContent = displayedNum + keyContent
    }
  };

   if (action === 'calculate') {
    const secondValue = displayedNum
    if (
    action === 'add' ||
    action === 'subtract' ||
    action === 'multiply' ||
    action === 'divide'
  ) {
    
    
     if (action === 'calculate') {
    
    calculator.dataset.firstValue = displayedNum
    calculator.dataset.operator = action
    display.textContent = calculate(firstValue, operator, secondValue)
  }

}{

  const firstValue = calculator.dataset.firstValue
  const operator = calculator.dataset.operator
  const secondValue = displayedNum

    if (firstValue && operator) {
        display.textContent = calculate(firstValue, operator, secondValue)
      }

      key.classList.add('is-depressed')
        calculator.dataset.previousKeyType = 'operator'
        calculator.dataset.firstValue = displayedNum
        calculator.dataset.operator = action
      
}

if (!displayedNum.includes('.')) {
  display.textContent = displayedNum + '.'
}
   }

  if (!displayedNum.includes('.')) {
      display.textContent = displayedNum + '.'
      }
    
      if (!action) {
        // ...
        calculator.dataset.previousKey = 'number'
      }
      
      if (action === 'decimal') {
        // ...
        calculator.dataset.previousKey = 'decimal'
      }
      
      if (action === 'clear') {
        // ...
        calculator.dataset.previousKeyType = 'clear'
      }
      
      if (action === 'calculate') {
       // ...
        calculator.dataset.previousKeyType = 'calculate'
      }

      if (action === 'decimal') {
        if (!displayedNum.includes('.')) {
          display.textContent = displayedNum + '.'
        } else if (previousKeyType === 'operator') {
          display.textContent = '0.'
        }
        
      calculator.dataset.previousKeyType = 'decimal'
  }

  

 
 
  const calculate = (n1, operator, n2) => {
  let result = ''
  
  if (operator === 'add') {
    result = parseFloat(n1) + parseFloat(n2)
  } else if (operator === 'subtract') {
    result = parseFloat(n1) - parseFloat(n2)
  } else if (operator === 'multiply') {
    result = parseFloat(n1) * parseFloat(n2)
  } else if (operator === 'divide') {
    result = parseFloat(n1) / parseFloat(n2)
  }
  
  return result
}
  

   

}
})

Знаю что желательно разделять код на блоки но я только начинающий))

[Alessio18911]

Привет! Оберни весь код в три-обратные-кавычки-js-твой-код-три-обратные-кавычки

[dmitry]

Я отмодерировал пост и обернул код. @Vanya_228 посмотри как изменился пост и в следующий раз оборачивай так же.

Вот эта кнопка в редакторе делает что надо

[Alessio18911]

И было бы неплохо увидеть и html (так понимаю, “дисплей” - это вёрстка и стили?), а то кидает, что keys в самой первой строке undefined

[Vanya_228]

Calculator

<!-- Add your script.js file here -->
<script src="calculator.js"  defer></script>

0

<div class="calculator__keys">
  <button class="key--operator" data-action="add">+</button>
  <button class="key--operator" data-action="subtract">-</button>
  <button class="key--operator" data-action="multiply">&times;</button>
  <button class="key--operator" data-action="divide">÷</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>0</button>
  <button data-action="decimal">.</button>
  <button data-action="clear">AC</button>
  <button class="key--equal" data-action="calculate">=</button>
</div>

Надеюсь я правильно вставил html файл?)

[dmitry]

@Vanya_228

if (action === 'decimal') {
    display.textContent = displayedNum + '.'
  }

Кажется если этоу убрать то 0. станет просто 0. И этот блок, похоже, дублирует функционал этого блока ниже

if (action === 'decimal') {
      if (!displayedNum.includes('.')) {
        display.textContent = displayedNum + '.'
      } else if (previousKeyType === 'operator') {
        display.textContent = '0.'
      }

---

Я пропустил вопрос с кодом через ИИ (claude 3.5 sonnet). Без возможности запустить пример кода чисто по тексту не разобраться как помочь.

[Vanya_228]

Понятно, тогда попробую самостоятельно решить эту проблему. Возможно надо добавить дополнительные части кода к существующему.

[dmitry]

То что ты дал недостаточно. Код не запускается если свести вместе и html и js. Конкретно js-ный код не имеет доступа к переменной display, и в разметке ничего про дисплей нет. А если часть логики завязана на классы, то без стилей тоже не получится воспроизвести поведение. Вот что я вижу:

Слишком много кода в самом вопросе чтобы понять что именно и как будет работать. А когда нет возможности воспроизвести поведение, то и не получится предоставить адекватную помощь-подсказку.