CODEWITHSUNDEEP
javascripthtml
Oscar Peace
Oscar Peace

Reputation: 99

Why does my JavaScript calculator keep on giving a output of 0?

My JS Calculator keeps on giving an output of 0 no matter what the operation is. I've checked the console multiple times but there aren't any errors, I've also checked to see if any of my variables are functions but there isn't any. I'm not sure if any of the variables are cross-referencing with themselves. I'm new to JavaScript.

My calculator: 

var firstNo = 0;
var secondNo = 0;
var currentNo = 0;
var addedNo = 0;

function updateDisplay(nos) {

var screenn = document.getElementById('display');
var scdata = document.getElementById('display').innerHTML;

String(nos);
String(scdata);

screenn.innerHTML = scdata + nos;
if (currentNo==0) {


addedNo = String(firstNo);

addedNo = addedNo + nos;

firstNo = Number(addedNo);

}if (currentNo==1) {

addedNo = String(secondNo);

addedNo = addedNo + nos;

secondNo = Number(addedNo);


}	

}

function clearScreen() {
	
document.getElementById('display').innerHTML = "";
firstNo = 0;
secondNo = 0;
currentNo = 0;
	
}

function setOperator(opo) {
	
var operator = opo;
currentNo = currentNo + 1;	
document.getElementById('display').innerHTML = "";
	
}

function calculate() {
	
if (operator="+") {
	
document.getElementById('display').innerHTML = firstNo + secondNo;
firstNo = 0;
secondNo = 0;
currentNo = 0; 	
	
}if (operator="*") {
	
document.getElementById('display').innerHTML = firstNo * secondNo;	
firstNo = 0;
secondNo = 0;
currentNo = 0; 
	
}if (operator="/") {
	
document.getElementById('display').innerHTML = firstNo / secondNo;	
firstNo = 0;
secondNo = 0;
currentNo = 0; 
	
}if (operator="-") {
	
document.getElementById('display').innerHTML = firstNo - secondNo;	
firstNo = 0;
secondNo = 0;
currentNo = 0; 
	
}
	
	
}
#keypad {
  display: table;
}

.row {
  display: table-row;
}

#display {
  background-color: yellow;
}
<body>
  <h1 id='display'></h1>
  <div id='keypad'>
    <div class='row'>
      <button onclick='updateDisplay(1)'>1</button>
      <button onclick='updateDisplay(2)'>2</button>
      <button onclick='updateDisplay(3)'>3</button>
      <button onclick='setOperator("+")'>+</button>
    </div>
    <div class='row'>
      <button onclick='updateDisplay(4)'>4</button>
      <button onclick='updateDisplay(5)'>5</button>
      <button onclick='updateDisplay(6)'>6</button>
      <button onclick='setOperator("-")'>-</button>
    </div>
    <div class='row'>
      <button onclick='updateDisplay(7)'>7</button>
      <button onclick='updateDisplay(8)'>8</button>
      <button onclick='updateDisplay(9)'>9</button>
      <button onclick='setOperator("/")'>/</button>
    </div>
    <div class='row'>
      <button onclick='updateDisplay(".")'>.</button>
      <button onclick='updateDisplay(0)'>0</button>
      <button onclick='clearScreen()'>X</button>
      <button onclick='setOperator("*")'>*</button>
    </div>
    <div class='row'>
      <button onclick='calculate()'>=</button>
    </div>
  </div>
</body>

Any help with this would be greatly appreciated.

Upvotes: 1

Views: 159

Answers (1)

Michele Dibenedetto
Michele Dibenedetto

Reputation: 575

Try this fix: - you need to put var operator= "" on the top of the main script. - you need to change if(operator={yourOperator}) to if(operator=={yourOperator})

NOTICE: you made a syntactic/logical error as to create an using "=" rather "==" or "===", and one other logical error making the var "operator" local. Next time put on the top of your script "using strict"; that should reveal some syntactic errors as the one made with your "if(operator="+")"

var firstNo = 0;
var secondNo = 0;
var currentNo = 0;
var addedNo = 0;
//FIRST CHANGE
var operator= ""

function updateDisplay(nos) {

var screenn = document.getElementById('display');
var scdata = document.getElementById('display').innerHTML;

String(nos);
String(scdata);

screenn.innerHTML =scdata + nos;
if (currentNo==0) {


addedNo = String(firstNo);

addedNo = addedNo + nos;

firstNo = Number(addedNo);

}if (currentNo==1) {

addedNo = String(secondNo);

addedNo = addedNo + nos;

secondNo = Number(addedNo);


}	

}

function clearScreen() {
	
document.getElementById('display').innerHTML = "";
firstNo = 0;
secondNo = 0;
currentNo = 0;
	
}

function setOperator(opo) {
//SECOND CHANGE
operator = opo;

currentNo = currentNo + 1;	
document.getElementById('display').innerHTML = "";
	
}



function calculate() {
   //THIRD CHANGE
if (operator =="+") {
	
document.getElementById('display').innerHTML = parseFloat(firstNo) + parseFloat(secondNo);
console.log(firstNo)
firstNo = 0;
secondNo = 0;
currentNo = 0; 	
	
}
  //FORTH CHANGE
if (operator =="*") {
	
document.getElementById('display').innerHTML = firstNo * secondNo;	
firstNo = 0;
secondNo = 0;
currentNo = 0; 
	
}
  //FITH CHANGE
if (operator =="/") {
	
document.getElementById('display').innerHTML = firstNo / secondNo;	
firstNo = 0;
secondNo = 0;
currentNo = 0; 
	
}
   //SIXTH CHANGE
   if (operator =="-") {
	
document.getElementById('display').innerHTML = firstNo - secondNo;	
firstNo = 0;
secondNo = 0;
currentNo = 0; 
	
}
	
	
}
#keypad {
  display: table;
}

.row {
  display: table-row;
}

#display {
  background-color: yellow;
}
<body>
  <h1 id='display'></h1>
  <div id='keypad'>
    <div class='row'>
      <button onclick='updateDisplay(1)'>1</button>
      <button onclick='updateDisplay(2)'>2</button>
      <button onclick='updateDisplay(3)'>3</button>
      <button onclick='setOperator("+")'>+</button>
    </div>
    <div class='row'>
      <button onclick='updateDisplay(4)'>4</button>
      <button onclick='updateDisplay(5)'>5</button>
      <button onclick='updateDisplay(6)'>6</button>
      <button onclick='setOperator("-")'>-</button>
    </div>
    <div class='row'>
      <button onclick='updateDisplay(7)'>7</button>
      <button onclick='updateDisplay(8)'>8</button>
      <button onclick='updateDisplay(9)'>9</button>
      <button onclick='setOperator("/")'>/</button>
    </div>
    <div class='row'>
      <button onclick='updateDisplay(".")'>.</button>
      <button onclick='updateDisplay(0)'>0</button>
      <button onclick='clearScreen()'>X</button>
      <button onclick='setOperator("*")'>*</button>
    </div>
    <div class='row'>
      <button onclick='calculate()'>=</button>
    </div>
  </div>
</body>

Upvotes: 1

Related Questions