为什么我的计算器代码不起作用？
我有一些未完成的代码，它应该为我点击的任何按钮返回一个数字，但它什么也不做，控制台也不会抛出错误，所以我看不到我做了什么。
我做了一些拼写检查，我的代码主要来自一个 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>
我只想要按钮显示数字
侃侃尔雅2回答
-
九州编程
进行以下更改后，我可以运行您的代码，将所有内容包装在一种方法中，您遇到以下点击事件的问题，不正确的，equals.onClick('click',()=>{ calculator.appendNumber(equals.innerText) calculator.updateDisplay()})如果你不想要 jQuery 使用 javascript click event 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
随时随地看视频慕课网APP
相关分类
JavaScript