萌新求助 js 写计算器的相关问题

我刚学 web 一段时间，才学了 js 老师就让我们写计算器，表示完全不会...
这里自己摸索写出来了一个很简陋的，但是有一些问题
我想在按“=”键后实现 cal 方法，让等式及计算出的结果都显示在文本框中
以下是源代码：
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
<style type="text/css">
.input_btn {
width: 150px;
font-size: 25px;
}

#div_main {
width: 100%;
text-align: center;
}

.div_row {
margin-bottom: 10px;
margin-top: 10px;
}
</style>
<div id="div_main">
<input type="text" id="input_text" />
<div class="div_row">
<input type="button" id="input1" class="input_btn" value="1" onclick="getvalue(this.id)" />
<input type="button" id="input2" class="input_btn" value="2" onclick="getvalue(this.id)" />
<input type="button" id="input3" class="input_btn" value="3" onclick="getvalue(this.id)" />
<input type="button" id="input_minus" class="input_btn" value="-" onclick="getvalue(this.id)" />
</div>
<div class="div_row">
<input type="button" id="input4" class="input_btn" value="4" onclick="getvalue(this.id)" />
<input type="button" id="input5" class="input_btn" value="5" onclick="getvalue(this.id)" />
<input type="button" id="input6" class="input_btn" value="6" onclick="getvalue(this.id)" />
<input type="button" id="input_divide" class="input_btn" value="/" onclick="getvalue(this.id)" />
</div>
<div class="div_row">
<input type="button" id="input7" class="input_btn" value="7" onclick="getvalue(this.id)" />
<input type="button" id="input8" class="input_btn" value="8" onclick="getvalue(this.id)" />
<input type="button" id="input9" class="input_btn" value="9" onclick="getvalue(this.id)" />
<input type="button" id="input_multiply" class="input_btn" value="*" onclick="getvalue(this.id)" />
</div>
<div class="div_row">
<input type="button" id="input_plus" class="input_btn" value="+" onclick="getvalue(this.id)" />
<input type="button" id="input_zero" class="input_btn" value="0" onclick="getvalue(this.id)" />
<input type="button" id="input_equal" class="input_btn" value="=" onclick="getvalue(this.id)" />
<input type="button" id="input_point" class="input_btn" value="." onclick="getvalue(this.id)" />
</div>
<div class="div_row">
<input type="button" id="input_back" class="input_btn" value="←" onclick="getvalue(this.id)" />
<input type="button" id="input_c" class="input_btn" value="AC" onclick="getvalue(this.id)" />
<input type="button" id="input_percent" class="input_btn" value="%" onclick="getvalue(this.id)" />
</div>
</div>
<script type="text/javascript">
function getvalue(id) {
console.log(document.getElementById(id).value)
document.getElementById("input_text").value += document.getElementById(id).value;
}

function cal(id) {
var s = document.getElementById("input_text");
var sum = 0;
var m;
var res = [];
var a = s.split(" ");
for(i = 0; i < a.length; i++) {
switch(id) {
case "input_minus":
m = 0 - parseInt(a[++i]);
res.push(m);
break;
case "input_multiply":
n = parseInt(res.pop());
m = n * a[++i];
res.push(m);
break;
case "input_divide":
n = parseInt(res.pop());
m = n / a[++i];
res.push(m);
break;
case "input_percent":
n = parseInt(res.pop());
m = n / 100;
res.push(m);
break;
default:
if(isNumber(a[i])) {
res.push(a[i]);
}
}
console.log(res);
for(i = 0; i < res.length; i++) {
sum = sum + res[i];
}
console.log(sum);
}
}
</script>
</body>

</html>