用四个匿名函数实现如下所示的简易计算器(参考教材P54)(不输入两个操作数或者输入非数字后点击加减乘除按钮看看运算结果?是否出现NaN,请完善程序避免算出结果NaN。)js
时间: 2024-10-27 12:15:26 浏览: 13
在JavaScript中,可以使用`eval`函数和事件监听来实现一个简易计算器,但是要注意`eval`存在安全风险,因为它可以直接执行任意代码。为了简化并且避免`NaN`问题,我们可以创建几个函数对象,而不是匿名函数。以下是这样的实现:
```javascript
// 创建一个Calculator对象
class Calculator {
constructor() {
this.add = (a, b) => a + b;
this.subtract = (a, b) => a - b;
this.multiply = (a, b) => {
if (b === 0) return "错误:除数不能为零";
return a * b;
};
this.divide = (a, b) => {
if (b === 0) return "错误:除数不能为零";
return a / b;
};
this.inputField = document.getElementById('number-input');
this.operationButtons = [
{ text: '+', func: this.add },
{ text: '-', func: this.subtract },
{ text: '*', func: this.multiply },
{ text: '/', func: this.divide },
];
// 绑定事件监听
this.operationButtons.forEach((button, index) => {
button.button = document.createElement('button');
button.button.innerText = button.text;
button.button.addEventListener('click', () => {
const num1 = parseFloat(this.inputField.value);
if (isNaN(num1)) return alert('错误:请输入有效数字');
let num2;
if (!isNaN(num2 = parseFloat(prompt('请输入第二个数字')))) {
console.log(button.func(num1, num2));
}
});
document.body.appendChild(button.button);
});
}
}
// 初始化计算器实例
const calculator = new Calculator();
```
在这个例子中,我们创建了一个`Calculator`类,其中包含四个方法(加、减、乘、除),每个方法都检查了除数是否为零。当用户点击按钮时,会获取输入框的数值并尝试转换成浮点数,如果输入不是数字,会弹出警告。
注意,由于浏览器的安全限制,`prompt`函数每次只允许一次输入,因此在此示例中,如果想要连续计算,可能需要更复杂的设计,例如使用一个输入框而非多次提示。
阅读全文