我想给计算器做一个，当输入值都为空时，点击运算符会自动弹出提示对话框的功能，但写完之后发现并没有效果，想请各位帮忙看一下哪里出了问题。
代码：
<!DOCTYPE html>
<html>
<head>
<title> A Simple Calculator </title>
<style>
p1{
color: bluck;
font-family: verdana;
font-size: 150%;
}
body{
background-color: white;
size: 100%;
}
.all{
position: absolute;
top:30%;
left:35%;
transition: translateX(-50%) translateY(-50%);
background-color: lightgrey;
border: 5px solid green;
}
</style>
<script>
var N1;
var N2;
var sum;
function checknotnull(id){
if(document.getElementBy("n1").value=="" && document.getElementBy("n2").value==""){
return false;
}else if(document.getElementBy("n1").value=="" && document.getElementBy("n2").value!=""){
return false;
}else if(document.getElementBy("n1").value!="" && document.getElementBy("n2").value==""){
return false;
}else{
return true;
}
}
function tishi(){
if(checknotnull(id) = true){
calculate();
}else{
alert("no");
}
}
function calculate(op){
N1 = Number(document.getElementById("n1").value);
N2 = Number(document.getElementById("n2").value);
sum = document.getElementById("r");
if(op == '+'){
sum = N1 * 1 + N2 * 1;
document.myform.r.value = sum;
}else if(op == '-'){
sum = N1 - N2;
document.myform.r.value = sum;
}else if(op == '*'){
sum = N1 * N2;
document.myform.r.value = sum;
}else if(op == '/' && N2!= 0){
sum = N1 / N2;
document.myform.r.value = sum;
}
}
</script>
</head>
<body>
<div class = "all">
<p1>A Simple Calculator (client-side JS)</p1>
<form id = "myform", name = "myform"><br>
<input type = "number", id = "n1", name = "n1"> First Number <br><br>
<input type = "number", id = "n2", name = "n2"> Second Number <br><br>
<input type = "text", id = "r", name = "r"> Result<br><br>
<table>
<tr>
<td> <input type = "button", onclick = "calculate('+')", value = "+", id = "a", name = "a"> </td>
<td> <input type = "button", onclick = "calculate('-')", value = "-", id = "s", name = "s"> </td>
<td> <input type = "button", onclick = "calculate('*')", value = "x", id = "m", name = "m"> </td>
<td> <input type = "button", onclick = "calculate('/')", value = "/", id = "d", name = "d"> </td>
<td> <input type = "reset", onclick = "alert('The calculate has been reset!')"> </td>
</tr>
</table><br>
</form>
</div>
</body>
</html>
主要问题是函数调用的顺序没理清，以及一些小的错误，如getElementById少些了个Id。
修改后代码如下：
<!DOCTYPE html>
<html>
<head>
<title> A Simple Calculator </title>
<style>
p1{
color: bluck;
font-family: verdana;
font-size: 150%;
}
body{
background-color: white;
size: 100%;
}
.all{
position: absolute;
top:30%;
left:35%;
transition: translateX(-50%) translateY(-50%);
background-color: lightgrey;
border: 5px solid green;
}
</style>
<script>
var N1;
var N2;
var sum;
function checknotnull(){
if(document.getElementById("n1").value=="" && document.getElementById("n2").value==""){
return false;
}else if(document.getElementById("n1").value=="" && document.getElementById("n2").value!=""){
return false;
}else if(document.getElementById("n1").value!="" && document.getElementById("n2").value==""){
return false;
}else{
return true;
}
}
function tishi(op){
if(checknotnull() == true){
calculate(op);
}else{
alert("no");
}
}
function calculate(op){
N1 = Number(document.getElementById("n1").value);
N2 = Number(document.getElementById("n2").value);
sum = document.getElementById("r");
if(op == '+'){
sum = N1 * 1 + N2 * 1;
document.myform.r.value = sum;
}else if(op == '-'){
sum = N1 - N2;
document.myform.r.value = sum;
}else if(op == '*'){
sum = N1 * N2;
document.myform.r.value = sum;
}else if(op == '/' && N2!= 0){
sum = N1 / N2;
document.myform.r.value = sum;
}
}
</script>
</head>
<body>
<div class = "all">
<p1>A Simple Calculator (client-side JS)</p1>
<form id = "myform", name = "myform"><br>
<input type = "number", id = "n1", name = "n1"> First Number <br><br>
<input type = "number", id = "n2", name = "n2"> Second Number <br><br>
<input type = "text", id = "r", name = "r"> Result<br><br>
<table>
<tr>
<td> <input type = "button", onclick = "tishi('+')", value = "+", id = "a", name = "a"> </td>
<td> <input type = "button", onclick = "tishi('-')", value = "-", id = "s", name = "s"> </td>
<td> <input type = "button", onclick = "tishi('*')", value = "x", id = "m", name = "m"> </td>
<td> <input type = "button", onclick = "tishi('/')", value = "/", id = "d", name = "d"> </td>
<td> <input type = "reset", onclick = "alert('The calculate has been reset!')"> </td>
</tr>
</table><br>
</form>
</div>
</body>
</html>
计算器的外观设计看起来不错！
<!DOCTYPE html>
<html>
<head>
<title> A Simple Calculator </title>
<style>
p1 {
color: bluck;
font-family: verdana;
font-size: 150%;
}
body {
background-color: white;
size: 100%;
}
.all {
position: absolute;
top: 30%;
left: 35%;
transition: translateX(-50%) translateY(-50%);
background-color: lightgrey;
border: 5px solid green;
}
</style>
<script>
var N1;
var N2;
var sum;
function checknotnull() {
if (document.getElementById("n1").value == "" && document.getElementById("n2").value == "") {
return false;
}
else if (document.getElementById("n1").value == "" && document.getElementById("n2").value != "") {
return false;
}
else if (document.getElementById("n1").value != "" && document.getElementById("n2").value == "") {
return false;
}
else {
return true;
}
}
function calculate(op) {
if (checknotnull()) {
N1 = Number(document.getElementById("n1").value);
N2 = Number(document.getElementById("n2").value);
sum = document.getElementById("r");
if (op == '+') {
sum = N1 * 1 + N2 * 1;
document.myform.r.value = sum;
}
else if (op == '-') {
sum = N1 - N2;
document.myform.r.value = sum;
}
else if (op == '*') {
sum = N1 * N2;
document.myform.r.value = sum;
}
else if (op == '/' && N2 != 0) {
sum = N1 / N2;
document.myform.r.value = sum;
}
}
else{
alert("no");
}
}
</script>
</head>
<body>
<div class="all">
<p1>A Simple Calculator (client-side JS)</p1>
<form id="myform" , name="myform"><br>
<input type="number" placeholder="" id="n1" name="n1" /> First Number <br><br>
<input type="number" placeholder="" id="n2" name="n2" /> Second Number <br><br>
<input type="text" placeholder="" id="r" name="r" /> Result<br><br>
<table>
<tr>
<td> <input type="button" onclick="calculate('+')" value="+" id="a" name="a"> </td>
<td> <input type="button" onclick="calculate('-')" value="-" id="s" name="s"> </td>
<td> <input type="button" onclick="calculate('*')" value="x" id="m" name="m"> </td>
<td> <input type="button" onclick="calculate('/')" value="/" id="d" name="d"> </td>
<td> <input type="reset" onclick="alert('The calculate has been reset!')"> </td>
</tr>
</table><br>
</form>
</div>
</body>
</html>