基本的JS / HTML计算器

Question

我正在尝试使用JavaScript和HTML制作一个完全基本的计算器。我尚未完全完成它，但我的按钮都没有工作。

function NumberClicked(numValue) {
	//alert(numValue);
	document.getElementById("calcInput").value += numValue;
}

function ClearAll() {
	document.getElementById("calcInput").value = '';
	document.getElementById("calcOutput").value = '';
}

function Add() {
	var output = document.getElementById("calcOutput");
	output.value = Number(document.getElementById("calcInput").value) + Number(output.value);

	document.getElementById("calcInput").value = '';
}

function Subtract() {
	var output = document.getElementById("calcOutput");
	output.value = Number(document.getElementById("calcInput").value) - Number(output.value);

	document.getElementById("calcInput").value = '';
}

function Divide() {
	var output = document.getElementById("calcOutput");
	if (output.value == "") {
		output.value = document.getElementById("calcInput");
	} else {
		output.value = Number(output.value) / Number(document.getElementById("calcInput").value);

	}
	document.getElementById("calcInput").value = '';
}

function Multiply() {
	//var 
}

result<input id="calcOutput" type="text">
<br>
input<input id="calcInput" type="text">
<br>
<button onclick="ClearAll();">clear</button>
<br>
<button onclick="NumberClicked(7);">7</button>
<button onclick="NumberClicked(8);">8</button>
<button onclick="NumberClicked(9);">9</button>
<button onclick="Divide();">/</button>
<br>
<button onclick="NumberClicked(4);">4</button>
<button onclick="NumberClicked(5);">5</button>
<button onclick="NumberClicked(6);">6</button>
<button onclick="Multiply();">*</button>
<br>
<button onclick="NumberClicked(1);">1</button>
<button onclick="NumberClicked(2);">2</button>
<button onclick="NumberClicked(3);">3</button>
<button onclick="Subtract();">-</button>
<br>
<button onclick="NumberClicked(0);">0</button>
<button onclick="Add();">+</button>
<br>

Fiddle

Answer 1

function c(val) {
    document.getElementById("d").value=val;
}

function math(val) {
    document.getElementById("d").value+=val;
}

function e() {
    try {
        c(eval(document.getElementById("d").value))
    }
    catch(e) {
        c('error')
    }
}

<div class="box">
    <div class="display"><input type="text" readonly size="18" id="d"></div>
    <div class="keys">
        <p>
            <input type="button" class="button gray" value="mrc" onclick='c("not defined")'>
            <input type="button" class="button gray" value="m-" onclick='c("not defined")'>
            <input type="button" class="button gray" value="m+" onclick='c("not defined")'>
            <input type="button" class="button pink" value="/" onclick='math("/")'>
        </p>
        <p>
            <input type="button" class="button red" value="7" onclick='math("7")'>
            <input type="button" class="button red" value="8" onclick='math("8")'>
            <input type="button" class="button red" value="9" onclick='math("9")'>
            <input type="button" class="button pink" value="*" onclick='math("*")'>
        </p>
        <p>
            <input type="button" class="button red" value="4" onclick='math("4")'>
            <input type="button" class="button red" value="5" onclick='math("5")'>
            <input type="button" class="button red" value="6" onclick='math("6")'>
            <input type="button" class="button pink" value="-" onclick='math("-")'>
        </p>
        <p>
            <input type="button" class="button red" value="1" onclick='math("1")'>
            <input type="button" class="button red" value="2" onclick='math("2")'>
            <input type="button" class="button red" value="3" onclick='math("3")'>
            <input type="button" class="button pink" value="+" onclick='math("+")'>
        </p>
        <p>
            <input type="button" class="button red" value="0" onclick='math("0")'>
            <input type="button" class="button red" value="." onclick='math(".")'>
            <input type="button" class="button red" value="C" onclick='c("")'>
            <input type="button" class="button orange" value="=" onclick='e()'>
        </p>
    </div>
</div>