Question

我有一些未完成的代码，想为我点击的按钮返回一个数字，但是它什么也不做，并且控制台不会抛出错误，所以我看不到我所做的事情。

我已经进行了一些拼写检查，而我的代码主要来自YouTube视频。

const minus = document.querySelector('[data-delete]');
const current = document.querySelector('[data-input]');
const allClear = document.querySelector('[data-all-clear]');
const numberButtons = document.querySelectorAll('[data-number]')
const operation = document.querySelectorAll('[data-operation]')  
const equals =document.querySelector('[data-equals]')

class Calc {
    constructor(inputText){
        this.inputText = current
        this.clear()
    }
    clear(){
        this.input=''
        this.operation=undefined
    }
    delete(){

    }
    writeNumber(num){
        this.input = num
    }
    operation(sign){

    }
    compute(){

    }
    updateDisplay(){
        this.input.innerText = this.operation
    }
}
const calculator = new Calc(current);

numberButtons.forEach(number=>{
equals.onClick('click',()=>{
    calculator.appendNumber(equals.innerText)
    calculator.updateDisplay()
})
}) 

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <link href="calc.css" rel="stylesheet">
    <script src="calc.js"></script>
  </head>
  <body>
  <div class="container-grid">
      <div data-input class="input">3</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>+</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>
   <script src="calc.js"></script>
  </body>
</html>

我只希望按钮显示数字

Answer 1

JS Fiddle答案：https://jsfiddle.net/xa14fbc0/

因此，我不太确定您要在此处实现什么目标，但我会指出一些可能有所帮助的事情。

您是否要使用data-equals使您的元素显示您单击的数字按钮？

您的功能

numberButtons.forEach(number=>{
    equals.onClick('click',()=>{
        calculator.appendNumber(equals.innerHTML)
    })
})

需要一些工作，您不会使用onClick('click'...来代替使用addEventListener('click'...来附加一个处理程序（使用.click来附加一个点击处理程序是jQuery，并且您没有jQuery设置在您的代码中-可能需要看一下）。此外，您每次都将on click一次又一次地附加到equals元素上，而不是按钮上。为此，您需要number.addEventListener('click'...将点击处理程序附加到每个按钮，以便每次单击时都会执行一个操作。您也正在调用方法calculator.appendNumber，但是您的计算器类中没有appendNumber方法。

您正在寻找的东西类似于：

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

您还想向Calc类添加appendNumber方法或调用Calc类中可用的方法

您还使用dom元素的current实例化了calculator，但是您的Calc类构造函数正在寻找inputText，因此您想要的东西如下：

const calculator = new Calc(current.value)

为了传递输入的值-请记住，构造函数在实例化时使用该值实例化，并且在更改输入值时不会更改-您需要附加一个on change处理程序输入，以使您的类实例在输入值更改时进行更改

我制作了一个JS小提琴，根据您的代码将输入更改为您单击以开始使用的数字：https://jsfiddle.net/xa14fbc0/

Answer 2

进行以下更改后，我就能运行您的代码，

将所有内容包装在一种方法中，
您对以下点击事件有疑问，

一个不正确，

equals.onClick('click',()=>{
    calculator.appendNumber(equals.innerText)
    calculator.updateDisplay()
})

如果您不希望jQuery使用javascript单击事件bind（）

equals.addEventListener("click",()=>{
    calculator.writeNumber(equals.innerText)
    calculator.updateDisplay()
})

请参阅以下内容更新您的功能

function Calci() {
    let minus = document.querySelector('[data-delete]');
    let current = document.querySelector('[data-input]');
    let allClear = document.querySelector('[data-all-clear]');
    let numberButtons = document.querySelectorAll('[data-number]')
    let operation = document.querySelectorAll('[data-operation]')  
    let equals =document.querySelector('[data-equals]')

    class Calc {
        letructor(inputText){
            this.inputText = current
            this.clear()
        }
        clear(){
            this.input=''
            this.operation=undefined
        }
        delete(){ }
        writeNumber(num){
            this.input = num
        }
        operation(sign){

        }
        compute(){  }
        updateDisplay(){
            this.input.innerText = this.operation
        }
    }
    let calculator = new Calc(current);

    numberButtons.forEach(number=>{
    equals.addEventListener("click",()=>{
        calculator.writeNumber(equals.innerText)
        calculator.updateDisplay()
    })
    }) 
}

Calci(); //call the method

为什么我的计算器代码无法正常工作？

2 个答案: