先使用选择器找到文本框元素，然后把文本框的值修改成你更改后的值，代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
</head>
<body>
<div id="calculate">
<div class="row">
<input id="echo" />
</div>
<div class="row">
<button>7</button>
<button>8</button>
<button>9</button>
<button>×</button>
</div>
<div class="row">
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
</div>
<div class="row">
<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>
</div>
<div class="row">
<button>+/-</button>
<button>0</button>
<button>.</button>
<button>=</button>
</div>
</div>
<script type="text/javascript">
// 自定义一个选择器
const $ = (selecter) => {
let selected = document.querySelectorAll(selecter);
return selected.length === 1 ? selected[0] : selected;
};
// 用于显示数字和操作以及结果
const echo = $('#echo');
const operators = ['+', '-', '×', '÷', '=', '.', '%', 'C', 'CE', '←', '+/-'];
const handle = [];
const operatorFunction = (operator) => {
if (operator === operators[9]) {
echo.value = String.prototype.substring.call(echo.value, 0, echo.value.length - 1);
} else if (operator === operators[10]) {
echo.value = 0 - Number(echo.value);
} else if (operator === operators[8]) {
// TODO
}
};
const initCalculate = () => {
let calculate = $('#calculate');
// 绑定事件
calculate.addEventListener('click', (e) => {
let { target } = e;
if (target.tagName === 'BUTTON') {
let operator = target.innerText;
if (operators.some(element => element === operator)) {
operatorFunction(operator);
} else {
let echoValue = echo.value;
echo.value = echoValue + operator;
}
}
});
}
// 页面加载完成后执行initCalculate
window.onload = initCalculate
</script>
</body>
</html>
document.querySelectorAll('#echo')[0].value = '要更改的值'
