练习小项目5：基础计算器
🎯 项目目标：
实现一个能进行基本四则运算（加减乘除）的网页计算器，用户输入两个数，通过点击按钮计算结果。
🛠️ 实现步骤参考：
-
获取两个输入框和按钮、结果区域
-
点击按钮时获取输入的值，并转为数字
-
判断是否为有效数字
-
输出两个数的计算结果
💡 要点讲解
-
input.value是字符串，记得用Number()或parseFloat()转换为数字； -
NaN（不是数字）判断可以用isNaN()； -
输出前先清空结果区域。
HTML 部分结构（简化版）：
<input id="number1" placeholder="输入第一个数字">
<input id="number2" placeholder="输入第二个数字">
<button id="addBtn">加</button>
<button id="subtractbBtn">减</button>
<button id="multiplicationBtn">乘</button>
<button id="divisionBtn">除</button>
<p id="result"></p>
初版JavaScript 功能实现：
const number1 = document.getElementById('number1')
const number2 = document.getElementById('number2')
const addBtn = document.getElementById('addBtn')
const subtractbBtn = document.getElementById('subtractbBtn')
const multiplicationBtn = document.getElementById('multiplicationBtn')
const divisionBtn = document.getElementById('divisionBtn')
const result = document.getElementById('result')const calculate = (action) => {let resultNum = 0if (!number1.value.trim() || !number2.value.trim()) {alert("输入不能为空！")return}if (isNaN(Number(number1.value)) || isNaN(Number(number2.value))) {alert("请输入有效数字！")return}switch (action) {case 'add':resultNum = Number(number1.value) + Number(number2.value)breakcase 'subtractb':resultNum = Number(number1.value) - Number(number2.value)breakcase 'multiplication':resultNum = Number(number1.value) * Number(number2.value)breakcase 'division':resultNum = Number(number1.value) / Number(number2.value)break}return resultNum
}// 为每个按钮添加监听
addBtn.addEventListener('click', () => {result.textContent = `结果是：${calculate('add')}`
})subtractbBtn.addEventListener('click', () => {result.textContent = `结果是：${calculate('subtractb')}`
})multiplicationBtn.addEventListener('click', () => {result.textContent = `结果是：${calculate('multiplication')}`
})divisionBtn.addEventListener('click', () => {result.textContent = `结果是：${calculate('division')}`
})
Q：为什么要用
Number()转换输入值？
A：因为input.value是字符串，直接加法会导致字符串拼接，比如"2" + "3"得到"23"，必须转换为数字才会进行加法。
页面效果展示 ：
❗遇到的问题和解决过程
🧩 问题1：return 了为什么还显示结果？
这是因为 calculate 函数中虽然 return 了，但你仍然调用了 result.textContent = ...，哪怕返回的是 undefined，也会执行这一句。理解为：
result.textContent = `结果是：${undefined}`
✅ 解决方法：可以让 calculate 返回 undefined，调用后判断：
const res = calculate('add')
if (res !== undefined) {result.textContent = `结果是：${res}`
}
🧩 问题2：四个按钮分别写监听器会不会太重复？
这种写法虽然重复，但清晰易读，对初学非常友好。后期可以优化为事件委托方式（如下），但不是必须要改。
✅ 使用事件委托 + data-action 简化监听逻辑
- 事件委托，不再为每个按钮绑定事件，而是利用 事件冒泡，只监听一次就能捕捉所有子元素（按钮）的点击行为。
data-action是一种 自定义 HTML 属性，叫做 data 属性（data-* attributes）。它的作用是：给 HTML 元素“打标签”，存储我们需要用到的额外信息。在 JavaScript 中，可以通过.dataset.action读取这个值。
HTML 部分结构（优化后）：
<div id="btnGroup"><button data-action="add">加</button><button data-action="subtractb">减</button><button data-action="multiplication">乘</button><button data-action="division">除</button>
</div>
优化后监听器的JavaScript 代码：
document.getElementById('btnGroup').addEventListener('click', (e) => {// 判断，确保用户点击的是按钮if (e.target.tagName === 'BUTTON') {const action = e.target.dataset.actionconst res = calculate(action)if (res !== undefined) {result.textContent = `结果是：${res}`}}
})