CODEWITHSUNDEEP
javascript
silkshocker
silkshocker

Reputation: 37

Issues building a calculator in JS

I'm a complete beginner at this and have started learning javascript through free code camp. I'm trying to write a program to make a calculator using basic javascript. My calculator seems to work fine except for it has a couple of issues that I want to fix. Edit to clarify what I'm asking for help here. Please run my codes in the snippet below with the following operation and you'll understand what I'm asking. Type 9-2 then hit '=' the calculator should display '7'. If you type a '2' immediately after the '7' is displayed, it will give you a '72' on the screen which is what I don't want it to do. I want it to reset to a blank screen. The other issue I have is a repeating display of operators. I've used the codes supplied by other commenters but they don't seem to work. I will keep searching for solution. Thank you all.

  1. the operators: +, -, *, / and . are at this time can be repeated when pushing the button repeatedly. How do I create a function to only allow it to be displayed once.
  2. After hitting the 'equal' button with the result displayed on the screen. If I pressed another number it would add on to the result instead of starting on a new screen. I need for it to reset and start a new using my current codes. Any guidance and direction is appreciated. I have search Google for days now and still stuck. I'm also terrible at logic which I'm trying my best to wrap my head around this. Thanks. 

var show = document.getElementById('display');
var reset = false;

function clear() {
  if (reset) {
    show.value = '';
    reset = false;
  }
}

function toScreen(x) {
  clear();
  show.value += x;
  if (x === 'c') {
    show.value = '';
  }
}

function answer() {
  x = show.value;
  x = eval(x);
  show.value = x;
  reset = false;
}

function power() {
  x = show.value;
  x = eval(x * x);
  show.value = x;
}

function backspace() {
  var num = show.value;
  var len = num.length - 1;
  var newNum = num.substring(0, len);
  show.value = newNum;
}

function percent() {
  x = show.value;
  x = eval(x / 100);
  show.value = x;
}

function opposite() {
  var n = show.value;
  n = n * -1;
  show.value = n;
}

function sqrt() {
  var number = show.value;
  var ans = Math.sqrt(number);
  if (number < 0)
    ans = "Try a positive number!";
  show.value = ans;
}

function pie() {
  var pi = show.value;
  var result = Math.PI;
  show.value = result;
}
<form>
  <input type="text" id="display" disabled><br>

  <input type="button" value="C" id="keys" onclick="toScreen('c')">
  <input type="button" value="DEL" id="keys" onclick="backspace()">
  <input type="button" value="π" id="keys" onclick="pie()">
  <input type="button" value="+/-" id="keys" onclick="opposite()"><br>

  <input type="button" value="√" id="keys" onclick="sqrt()">
  <input type="button" value="%" id="keys" onclick="percent()">
  <input type="button" value="x^2" id="keys" onclick="power()">
  <input type="button" value="+" id="keys" onclick="toScreen('+')"><br>

  <input type="button" value="9" id="keys" onclick="toScreen('9')">
  <input type="button" value="8" id="keys" onclick="toScreen('8')">
  <input type="button" value="7" id="keys" onclick="toScreen('7')">
  <input type="button" value="-" id="keys" onclick="toScreen('-')"><br>

  <input type="button" value="6" id="keys" onclick="toScreen('6')">
  <input type="button" value="5" id="keys" onclick="toScreen('5')">
  <input type="button" value="4" id="keys" onclick="toScreen('4')">
  <input type="button" value="*" id="keys" onclick="toScreen('*')"><br>

  <input type="button" value="3" id="keys" onclick="toScreen('3')">
  <input type="button" value="2" id="keys" onclick="toScreen('2')">
  <input type="button" value="1" id="keys" onclick="toScreen('1')">
  <input type="button" value="/" id="keys" onclick="toScreen('/')"><br>

  <input type="button" value="0" id="keys" onclick="toScreen('0')">
  <input type="button" value="." id="keys" onclick="toScreen('.')">
  <input type="button" value="=" id="equal" onclick="answer()"><br>
</form>

Upvotes: 2

Views: 209

Answers (3)

Zenoo
Zenoo

Reputation: 12880

  1. Edit your toScreen() function to only add your operator if it was not previously typed:
function toScreen(x) {
  clear();
  var notTwice = ['+', '-', '*', '/', '.']; //List of chars that should not be repeated
  if(notTwice.indexOf(x) > -1){
    if(show.value.slice(-1) != x){ //Only type it if it wasn't typed right before
      show.value += x;
    }
  }
  else{
    show.value += x;
  }
  if (x === 'c') {
    show.value = '';
  }
}
  1. Just set reset to false in your answer() function.

Here is a working snippet for you :

var show = document.getElementById('display');
var reset = false;
var i = "";  //store what is typed

function clear() {
  if (reset) {
    i = '';
    show.value = i;
    reset = false;
  }
}

function toScreen(x) {
  clear();
  var notTwice = ['+', '-', '*', '/', '.']; //List of chars that should not be repeated
  if(notTwice.indexOf(x) > -1){
    if(show.value.slice(-1) != x){ //Only type it if it wasn't typed right before
      show.value += x;
    }
  }
  else{
    show.value += x;
  }
  if (x === 'c') {
    show.value = '';
  }
}

function answer() {
  var op = ["+", "-", "*", ".", "/"];
  for (a=0; a<op.length; a++) {
    if (i.charAt(i.length - 1) === op[a]) {
      alert("Wrong input");
      return false;
    }
  }
  x = show.value;
  x = eval(x);
  show.value = x;
  reset = false;
}

function power() {
  if (isNaN(i)) {
     alert("please enter a valid number");
     return false;
   }
  x = show.value;
  x = eval(x * x);
  show.value = x;
  reset = true;
}

function backspace() {
  var num = show.value;
  var len = num.length - 1;
  var newNum = num.substring(0, len);
  show.value = newNum;
  reset = true;
}

function percent() {
  x = show.value;
  x = eval(x / 100);
  show.value = x;
  reset = true;
}

function opposite() {
  var n = show.value;
  n = n * -1;
  show.value = n;
  reset = true;
}

function sqrt() {
  var number = show.value;
  var ans = Math.sqrt(number);
  if (number < 0)
    ans = "Try a positive number!";
  show.value = ans;
  reset = true;
}

function pie() {
  var pi = show.value;
  var result = Math.PI;
  show.value = result;
  reset = true;
}
<form>
  <input type="text" id="display" disabled><br>

  <input type="button" value="C" id="keys" onclick="toScreen('c')">
  <input type="button" value="DEL" id="keys" onclick="backspace()">
  <input type="button" value="π" id="keys" onclick="pie()">
  <input type="button" value="+/-" id="keys" onclick="opposite()"><br>

  <input type="button" value="√" id="keys" onclick="sqrt()">
  <input type="button" value="%" id="keys" onclick="percent()">
  <input type="button" value="x^2" id="keys" onclick="power()">
  <input type="button" value="+" id="keys" onclick="toScreen('+')"><br>

  <input type="button" value="9" id="keys" onclick="toScreen('9')">
  <input type="button" value="8" id="keys" onclick="toScreen('8')">
  <input type="button" value="7" id="keys" onclick="toScreen('7')">
  <input type="button" value="-" id="keys" onclick="toScreen('-')"><br>

  <input type="button" value="6" id="keys" onclick="toScreen('6')">
  <input type="button" value="5" id="keys" onclick="toScreen('5')">
  <input type="button" value="4" id="keys" onclick="toScreen('4')">
  <input type="button" value="*" id="keys" onclick="toScreen('*')"><br>

  <input type="button" value="3" id="keys" onclick="toScreen('3')">
  <input type="button" value="2" id="keys" onclick="toScreen('2')">
  <input type="button" value="1" id="keys" onclick="toScreen('1')">
  <input type="button" value="/" id="keys" onclick="toScreen('/')"><br>

  <input type="button" value="0" id="keys" onclick="toScreen('0')">
  <input type="button" value="." id="keys" onclick="toScreen('.')">
  <input type="button" value="=" id="equal" onclick="answer()"><br>
</form>

Upvotes: 0

Shashank Shekhar
Shashank Shekhar

Reputation: 176

See the codes

Here is the perfectly working code. You can replace x with i some places like:

function power() {
  x = eval(i * i);
  show.value = x;
  reset = true;
}

Problem fixed:

  1. Your 1st & 2nd problem

  2. Your code didn't check is input starting from a num. or operator (/1, *1)

  3. Your code didn't check for invalid input (1+, 1+1+ etc)

  4. Your code also not clear screen (like in case of anser) after power Pi etc

  5. Your function like PI Power not check if input is a number (power of 8*) see the power function:

var show = document.getElementById('display');
var reset = false;
var i = "";  //store what is typed

function clear() {
  if (reset) {
    i = '';
    show.value = i;
    reset = false;
  }
}

function toScreen(x) {
  clear();
  if (x === "+" || x === "-" || x === "*" || x === "/" || x === ".") {
    if (i.charAt(i.length - 1)  === x) {
      return false;
    }
    if (i.length === 0) {
      return false;
    }
  }
  i += x;
  if (x === 'c') {
    i = '';
  }
  show.value = i;
}

function answer() {
  var op = ["+", "-", "*", ".", "/"];
  for (a=0; a<op.length; a++) {
    if (i.charAt(i.length - 1) === op[a]) {
      alert("Wrong input");
      return false;
    }
  }
  x = show.value;
  x = eval(x);
  show.value = x;
  reset = true;
}

function power() {
  if (isNaN(i)) {
     alert("please enter a valid number");
     return false;
   }
  x = show.value;
  x = eval(x * x);
  show.value = x;
  reset = true;
}

function backspace() {
  var num = show.value;
  var len = num.length - 1;
  var newNum = num.substring(0, len);
  show.value = newNum;
  reset = true;
}

function percent() {
  x = show.value;
  x = eval(x / 100);
  show.value = x;
  reset = true;
}

function opposite() {
  var n = show.value;
  n = n * -1;
  show.value = n;
  reset = true;
}

function sqrt() {
  var number = show.value;
  var ans = Math.sqrt(number);
  if (number < 0)
    ans = "Try a positive number!";
  show.value = ans;
  reset = true;
}

function pie() {
  var pi = show.value;
  var result = Math.PI;
  show.value = result;
  reset = true;
}
<form>
  <input type="text" id="display" disabled><br>

  <input type="button" value="C" id="keys" onclick="toScreen('c')">
  <input type="button" value="DEL" id="keys" onclick="backspace()">
  <input type="button" value="π" id="keys" onclick="pie()">
  <input type="button" value="+/-" id="keys" onclick="opposite()"><br>

  <input type="button" value="√" id="keys" onclick="sqrt()">
  <input type="button" value="%" id="keys" onclick="percent()">
  <input type="button" value="x^2" id="keys" onclick="power()">
  <input type="button" value="+" id="keys" onclick="toScreen('+')"><br>

  <input type="button" value="9" id="keys" onclick="toScreen('9')">
  <input type="button" value="8" id="keys" onclick="toScreen('8')">
  <input type="button" value="7" id="keys" onclick="toScreen('7')">
  <input type="button" value="-" id="keys" onclick="toScreen('-')"><br>

  <input type="button" value="6" id="keys" onclick="toScreen('6')">
  <input type="button" value="5" id="keys" onclick="toScreen('5')">
  <input type="button" value="4" id="keys" onclick="toScreen('4')">
  <input type="button" value="*" id="keys" onclick="toScreen('*')"><br>

  <input type="button" value="3" id="keys" onclick="toScreen('3')">
  <input type="button" value="2" id="keys" onclick="toScreen('2')">
  <input type="button" value="1" id="keys" onclick="toScreen('1')">
  <input type="button" value="/" id="keys" onclick="toScreen('/')"><br>

  <input type="button" value="0" id="keys" onclick="toScreen('0')">
  <input type="button" value="." id="keys" onclick="toScreen('.')">
  <input type="button" value="=" id="equal" onclick="answer()"><br>
</form>

Upvotes: 1

M.Wendel
M.Wendel

Reputation: 33

function answer() {
  x = show.value;
  x = eval(x);
  show.value = x;
  reset = true;
}

Change the reset to true, so that it clears the show.value to be an empty string, that solves nr.2 for you

Upvotes: 0

Related Questions