Having some trouble developing a calculator using HTML5, CSS, and JavaScript. After passing my HTML and CSS through validators successfully, I encountered issues when adding JavaScript functions to enable the functionality of the buttons on the calculator. Unfortunately, nothing is showing up on the screen and none of the functions are executing. What could be the error in my code? Any assistance would be greatly appreciated.
Thank you.
Below is the snippet of my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Linking the .css file -->
<script type="text/javascript" src="calculator.js"></script>
<link rel="stylesheet" href="calculator.css">
<title>Calculator Front-End</title>
</head>
<body>
<form>
<input type="text" id="screenid" class="screen" name="calcscreen" value="0">
<p>
</p>
<table>
<tr>
<td> </td>
<td><button class="digitbutton" id="digit" onclick="addDisp(this)">7</button></td>
<td><button class="digitbutton" id="digit" onclick="addDisp(this)">8</button></td>
<td><button class="digitbutton" id="digit" onclick="addDisp(this)">9</button></td>
<td><button id="add" class="symbolbutton" onclick="addDisp(this)">+</button></td>
</tr>
<tr>
<td></td>
<td><button class="digitbutton" id="digit" onclick="addDisp(this)">4</button></td>
<td><button class="digitbutton" id="digit" onclick="addDisp(this)">5</button></td>
<td><button class="digitbutton" id="digit" onclick="addDisp(this)">6</button></td>
<td><button id="sub" class="symbolbutton" onclick="addDisp(this)">−</button></td>
</tr>
<tr>
<td></td>
<td><button class="digitbutton" id="digit" onclick="addDisp(this)">1</button></td>
<td><button class="digitbutton" id="digit" onclick="addDisp(this)">2</button></td>
<td><button class="digitbutton" id="digit" onclick="addDisp(this)">3</button></td>
<td><button id="prod" class="symbolbutton" onclick="addDisp(this)">×</button></td>
</tr>
<tr>
<td></td>
<td></td>
<td><button class="digitbutton" id="digit" onclick="addDisp(this)">0</button></td>
<td><button id="result" class="symbolbutton" onclick="doCalc(this)">=</button></td>
<td><button id="div" class="symbolbutton" onclick="addDisp(this)">÷</button></td>
</tr>
</table>
</form>
</body>
</html>
-------------------------------------------------------------------------
-------------------------------------------------------------------------
****
****Please find below my calculator.js content:
//Variables and constants used for functions
var previousvalue = 0; //Last button pressed
var newvalue = 0; //Current button being pressed
var previousop = 'plus';
var previnputcn = 'symbolbutton' //Classname of the previous button
//Function to display elements on screen
function addDisp(button)
{
if (button.className == "digitbutton")
{
if (previnputcn == "symbolbutton")
{
newvalue = document.getElementById("digit").value;
}
else
{
newvalue = newvalue + document.getElementById("digit").value;
}
}
document.getElementById("screenid").value = document.getElementById("screenid").value + newvalue;
if (button.className == "symbolbutton")
{
var calcResult = doCalc(previousvalue, newvalue, previousop);
if (calcResult <= 1000000 || calcResult == "ERROR")
{
newvalue = calcResult;
}
document.getElementById("screenid").value = document.getElementById("screenid").value + newvalue;
if (newvalue == "ERROR")
{
previousvalue = 0;
}
else
{
previousvalue = newvalue;
}
previousop = button.id;
}
previnputcn = button.className;
}
/*Function that handles all calculations*/
function doCalc(newvalue, previousvalue, previousop)
{
var output = newvalue;
if (previousop == "plus")
{
output = parseInt(previousValue) + parseInt(newvalue);
}
else if (previousop == "minus")
{
output = parseInt(previousValue) - parseInt(newvalue);
}
else if (previousop == "times")
{
output = parseInt(previousValue) * parseInt(newvalue);
}
else if (previousop == "divide")
{
if (newvalue != 0)
{
output = parseInt(previousValue) / parseInt(newvalue);
output = parseInt(output);
}
else
{
output = "ERROR";
}
}
calcResult = output;
}