Попытка создать калькулятор с помощью JS

ProgramBox

Попытка создать калькулятор с помощью JS

Post author:admin
Запись опубликована:16 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #css #calculator

#javascript #HTML #css #калькулятор

Вопрос:

Только что закончил код для сборки калькулятора из руководства YT. Калькулятор выглядит великолепно, но я не могу заставить его работать. Я не понимаю, что я сделал все в видео дословно. Кто-нибудь может мне помочь? Я смотрел видео несколько раз, но я просто не могу заставить его работать и не могу понять, почему. Я предполагаю, что что-то не так с переменной appendNumber. Но я не уверен, что все еще новичок в JS.

 class Calculator {
    constructor(previousOperandTextElement, currentOperandTextElement) {
    this.previousOperandTextElement = previousOperandTextElement
    this.currentOperandTextElement = currentOperandTextElement
    this.clear()
    }
    clear(){
        this.currentOperand = ''
        this.previousOperand = ''
        this.operation = undefined
    }
    
    delete(){
        this.currentOperand = this.currentOperand.toString().slice(0, -1)
    }
    
    appendNumber(number) {
        if(number === '.' amp;amp; this.currentOperand.includes('.')) return
        this.currentOperand = this.currentOperand.toString()   number.toString()
    }
    
    chooseOperation(operation){
        if (this.currentOperand === '') return
        if (this.previousOperand !== '') {
            this.compute()
        }
        this.operation = operation
        this.previousOperand = this.currentOperand
        this.currentOperand = ''
    }
    
    compute(){
        let computation
        const prev = parseFloat(this.previousOperand)
        const current = parseFloat(this.currentOperand)
        if (isNaN(prev) || is NaN(current)) return
        switch (this.operation){
        case ' ':
            computation = prev   current
            break
            case '-':
            computation = prev - current
            break
            case '*':
            computation = prev * current
            break
            case 'amp;#247':
            computation = prev / current
            break
            default:
            return
        }
        this.currentOperand = computation
        this.operation = undefined
        this.previousOperand = ''
    }

getDisplayNumber(number) {
    const stringNumber = number.toString()
    const interDigits = parseFloat(stringNumber.split('.')[0])
    const decimalDigits = stringNumber.split('.')[1]
    let interDisplay
    if (isNaN(interDigits)) {
        integerDisplay = ''
    } else {
        integerDisplay integerDigits.tpLocaleString('en', {
        maximumFractionDigits: 0 })
        
    if(decimalDigits != null) {
        return `$(integerDisplay).$(decimalDigits)`
    }else{
        return itegerDisplay
        
    }
    
}

    updateDisplay(){
        this.currentOperandTextElement.innerText = 
        this.getDisplayNumber(this.currentOperand)
        if(this.operation !=null){
        this.previousOperandTextElement.innerText =
        $(this.getDisplayNumber(this.previousOperand) $(this.operation)
        }else {
            this.previousOperandTextElement = ''
    }
}
    const numberButtons = document.querySelectorAll('[data-number]')
    const operationButtons = document.querySelectorAll('[data-operation]')
    const equalsButton = document.querySelector('[data-equals]')
    const deleteButton = document.querySelector('[data-delete]')
    const allClearButton = document.querySelector('[data-all-clear]')
    const previousOperandTextElement = document.querySelector('[data-previous-operand]')
    const currentOperandTextElement = document.querySelector('[data-current-operand]')
    
    const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)
    
    numberButtons.forEach(button => {
        button.addEventListener('click', () => {
            calculator.appendNumber(button.innerText)
            calculator.updateDisplay()
            })
            })
            
    operationButtons.forEach(button => {
        button.addEventListener('click', () => {
            calculator.chooseOperation(button.innerText)
            calculator.updateDisplay()
            })
            })


    equalsButton.addEventListener('click, button => {
        calculator.compute()
        calculator.updateDisplay()
    })
        
    allClearButton.addEventListener('click, button => {
        calculator.clear()
        calculator.updateDisplay()
    })
    
    deleteButton.addEventListener('click, button => {
        calculator.delete()
        calculator.updateDisplay()
    })

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>New JS</title>
  <style>
    *, *::before, *::after{
    box-sizing:border-box;
    font-weight:normal;
    font-family: Gotham Rounded, sans-serif;
    color:Blue;
    }
    
    body{
        padding:0;
        margin:0;
        background: linear-gradient(to right,blue, green);
    }
    
    .calculator-grid{
        display:grid;
        justify-content:center;
        align-content:center;
        min-height:100vh;
        grid-template-columns:repeat(4, 100px);
        grid-template-rows: minmax(120px, auto) repeat(5, 100px);
    }
    
    .calculator-grid > button {
        cursor:pointer;
        font-size: 2rem;
        border:1px solid white;
        outline:none;
        background-color:rgba(255, 255, 255, .75);
    }
    
    .calculator-grid > button:hover{
        background-color:rgba(255, 255, 255, .9);
    }
    
    .span-two{
        grid-column: span 2;
    }
    
    .output{
        grid-column:1 /-1;
        background-color:rgba(0,0, .75);
        display:flex;
        align-items:flex-end;
        justify-content: space-around;
        flex-direction:column;
        padding:10px;
        word-wrap; break-word;
        word-break:break-all;
    }
    
    .output .previous-operand{
        color:rgba(255, 255, 255, .75);
        font-size: 1.5rem;
    }
    
    .output .current-operand{
        color:white;
        font-size:2.5rem;
    }
  </style>
  <script src="calculator.js" defer> </script>
</head>

<body>
<div class="calculator-grid">
    <div class="output">
    <div data-previous-operand class="previous-operand"></div>
    <div data-current-operand class="current-operand"></div>
    </div>
    <button data-all-clear class="span-two">AC</button>
    <button data-delete>DEL</button>
    <button data-operation> </button>
    <button data-number>1</button>
    <button data-number>2</button>
    <button data-number>3</button>
    <button data-operation>*</button>
    <button data-number>4</button>
    <button data-number>5</button>
    <button data-number>6</button>
    <button data-operation> amp;#247 </button>
    <button data-number>7</button>
    <button data-number>8</button>
    <button data-number>9</button>
    <button data-operation>-</button>
    <button data-number>.</button>
    <button data-number>0</button>
    <button data-equals class="span-two">=</button>
    </div>


</body>

</html>

Ответ №1:

Ошибки в вашем коде в основном syntactic . Например, в вашем коде по умолчанию отсутствует .innerText for this.previousOperandTextElement = . Строка — $ {this.getDisplayNumber (this.previousOperand)} $ {this.operation} была без quotes . В строке integerDisplay = integerDigits.toLocaleString ('en', {maximumFractionDigits: 0}) отсутствовал equal sign .

 class Calculator {
  constructor(previousOperandTextElement, currentOperandTextElement) {
    this.previousOperandTextElement = previousOperandTextElement
    this.currentOperandTextElement = currentOperandTextElement
    this.clear()
  }

  clear() {
    this.currentOperand = ''
    this.previousOperand = ''
    this.operation = undefined
  }

  delete() {
    this.currentOperand = this.currentOperand.toString().slice(0, -1)
  }

  appendNumber(number) {
    if (number === '.' amp;amp; this.currentOperand.includes('.')) return
    this.currentOperand = this.currentOperand.toString()   number.toString()
  }

  chooseOperation(operation) {
    if (this.currentOperand === '') return
    if (this.previousOperand !== '') {
      this.compute()
    }
    this.operation = operation
    this.previousOperand = this.currentOperand
    this.currentOperand = ''
  }

  compute() {
    let computation
    const prev = parseFloat(this.previousOperand)
    const current = parseFloat(this.currentOperand)
    if (isNaN(prev) || isNaN(current)) return
    switch (this.operation) {
      case ' ':
        computation = prev   current
        break
      case '-':
        computation = prev - current
        break
      case '*':
        computation = prev * current
        break
      case '÷':
        computation = prev / current
        break
      default:
        return
    }
    this.currentOperand = computation
    this.operation = undefined
    this.previousOperand = ''
  }

  getDisplayNumber(number) {
    const stringNumber = number.toString()
    const integerDigits = parseFloat(stringNumber.split('.')[0])
    const decimalDigits = stringNumber.split('.')[1]
    let integerDisplay
    if (isNaN(integerDigits)) {
      integerDisplay = ''
    } else {
      integerDisplay = integerDigits.toLocaleString('en', { maximumFractionDigits: 0 })
    }
    if (decimalDigits != null) {
      return `${integerDisplay}.${decimalDigits}`
    } else {
      return integerDisplay
    }
  }

  updateDisplay() {
    this.currentOperandTextElement.innerText =
      this.getDisplayNumber(this.currentOperand)
    if (this.operation != null) {
      this.previousOperandTextElement.innerText =
        `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`
    } else {
      this.previousOperandTextElement.innerText = ''
    }
  }
}


const numberButtons = document.querySelectorAll('[data-number]')
const operationButtons = document.querySelectorAll('[data-operation]')
const equalsButton = document.querySelector('[data-equals]')
const deleteButton = document.querySelector('[data-delete]')
const allClearButton = document.querySelector('[data-all-clear]')
const previousOperandTextElement = document.querySelector('[data-previous-operand]')
const currentOperandTextElement = document.querySelector('[data-current-operand]')

const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)

numberButtons.forEach(button => {
  button.addEventListener('click', () => {
    calculator.appendNumber(button.innerText)
    calculator.updateDisplay()
  })
})

operationButtons.forEach(button => {
  button.addEventListener('click', () => {
    calculator.chooseOperation(button.innerText)
    calculator.updateDisplay()
  })
})

equalsButton.addEventListener('click', button => {
  calculator.compute()
  calculator.updateDisplay()
})

allClearButton.addEventListener('click', button => {
  calculator.clear()
  calculator.updateDisplay()
})

deleteButton.addEventListener('click', button => {
  calculator.delete()
  calculator.updateDisplay()
})

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>New JS</title>
  <style>
    *, *::before, *::after{
    box-sizing:border-box;
    font-weight:normal;
    font-family: Gotham Rounded, sans-serif;
    color:Blue;
    }
    
    body{
        padding:0;
        margin:0;
        background: linear-gradient(to right,blue, green);
    }
    
    .calculator-grid{
        display:grid;
        justify-content:center;
        align-content:center;
        min-height:100vh;
        grid-template-columns:repeat(4, 100px);
        grid-template-rows: minmax(120px, auto) repeat(5, 100px);
    }
    
    .calculator-grid > button {
        cursor:pointer;
        font-size: 2rem;
        border:1px solid white;
        outline:none;
        background-color:rgba(255, 255, 255, .75);
    }
    
    .calculator-grid > button:hover{
        background-color:rgba(255, 255, 255, .9);
    }
    
    .span-two{
        grid-column: span 2;
    }
    
    .output{
        grid-column:1 /-1;
        background-color:rgba(0,0, .75);
        display:flex;
        align-items:flex-end;
        justify-content: space-around;
        flex-direction:column;
        padding:10px;
        word-wrap; break-word;
        word-break:break-all;
    }
    
    .output .previous-operand{
        color:rgba(255, 255, 255, .75);
        font-size: 1.5rem;
    }
    
    .output .current-operand{
        color:white;
        font-size:2.5rem;
    }
  </style>
  <script src="calculator.js" defer> </script>
</head>

<body>
<div class="calculator-grid">
    <div class="output">
    <div data-previous-operand class="previous-operand"></div>
    <div data-current-operand class="current-operand"></div>
    </div>
    <button data-all-clear class="span-two">AC</button>
    <button data-delete>DEL</button>
    <button data-operation> </button>
    <button data-number>1</button>
    <button data-number>2</button>
    <button data-number>3</button>
    <button data-operation>*</button>
    <button data-number>4</button>
    <button data-number>5</button>
    <button data-number>6</button>
    <button data-operation> amp;#247 </button>
    <button data-number>7</button>
    <button data-number>8</button>
    <button data-number>9</button>
    <button data-operation>-</button>
    <button data-number>.</button>
    <button data-number>0</button>
    <button data-equals class="span-two">=</button>
    </div>


</body>

</html>

1. о, хорошо, теперь я понимаю, я думаю, что я проглядел. Большое спасибо за вашу помощь.

2. никаких проблем .. если мой ответ вам помог, установите флажок слева от моего ответа. Спасибо.