如何添加事件监听器来实现计算器的功能

要实现计算器的功能，需要在用户点击按钮时添加事件监听器来执行相应的操作。以下是一个基本的示例代码：

HTML代码：

<input type="text" id="input">
<button id="btn-clear">C</button>
<button id="btn-divide">/</button>
<button id="btn-multiply">*</button>
<button id="btn-subtract">-</button>
<button id="btn-add">+</button>
<button id="btn-equals">=</button>
<button id="btn-decimal">.</button>
<button id="btn-0">0</button>
<button id="btn-1">1</button>
<button id="btn-2">2</button>
<button id="btn-3">3</button>
<button id="btn-4">4</button>
<button id="btn-5">5</button>
<button id="btn-6">6</button>
<button id="btn-7">7</button>
<button id="btn-8">8</button>
<button id="btn-9">9</button>

JavaScript代码：

// 获取所有按钮元素
const btnClear = document.getElementById('btn-clear');
const btnDivide = document.getElementById('btn-divide');
const btnMultiply = document.getElementById('btn-multiply');
const btnSubtract = document.getElementById('btn-subtract');
const btnAdd = document.getElementById('btn-add');
const btnEquals = document.getElementById('btn-equals');
const btnDecimal = document.getElementById('btn-decimal');
const btn0 = document.getElementById('btn-0');
const btn1 = document.getElementById('btn-1');
const btn2 = document.getElementById('btn-2');
const btn3 = document.getElementById('btn-3');
const btn4 = document.getElementById('btn-4');
const btn5 = document.getElementById('btn-5');
const btn6 = document.getElementById('btn-6');
const btn7 = document.getElementById('btn-7');
const btn8 = document.getElementById('btn-8');
const btn9 = document.getElementById('btn-9');
const input = document.getElementById('input');

// 添加事件监听器
btnClear.addEventListener('click', () => {
  input.value = '';
});

btnDivide.addEventListener('click', () => {
  input.value += '/';
});

btnMultiply.addEventListener('click', () => {
  input.value += '*';
});

btnSubtract.addEventListener('click', () => {
  input.value += '-';
});

btnAdd.addEventListener('click', () => {
  input.value += '+';
});

btnEquals.addEventListener('click', () => {
  input.value = eval(input.value);
});

btnDecimal.addEventListener('click', () => {
  input.value += '.';
});

btn0.addEventListener('click', () => {
  input.value += '0';
});

btn1.addEventListener('click', () => {
  input.value += '1';
});

btn2.addEventListener('click', () => {
  input.value += '2';
});

btn3.addEventListener('click', () => {
  input.value += '3';
});

btn4.addEventListener('click', () => {
  input.value += '4';
});

btn5.addEventListener('click', () => {
  input.value += '5';
});

btn6.addEventListener('click', () => {
  input.value += '6';
});

btn7.addEventListener('click', () => {
  input.value += '7';
});

btn8.addEventListener('click', () => {
  input.value += '8';
});

btn9.addEventListener('click', () => {
  input.value += '9';
});

这段代码中，我们首先获取了所有的按钮元素和文本输入框元素。然后，我们为每个按钮添加了一个事件监听器，以便响应用户的操作。例如，当用户点击“+”按钮时，我们将“+”字符添加到文本输入框中。当用户点击“=”按钮时，我们使用eval函数将文本输入框中的表达式计算出来，并将结果显示在文本输入框中。