0

I would appreciate any help with the following issue. When i input my string in my calculator it displays Nan with the next integer ex change -1 + 2 to -1 + -2 it displays Nan. I used Math.abs() to change my value to negative or positive.

var infoBox = document.getElementById('screen');

function addscreen(x) { //x verteenwoordig die knopie wat gedruk word bv 1 en dan by vorige waarde gevoeg word van infoBox;
  infoBox.value = infoBox.value + x;
  if (x === 'C') {
    infoBox.value = '';
  }
}

function changesign(x) {
  changeNum();
}

function changeNum(x) {
  x = infoBox.value;
  x = Math.sign(x);
  if (x === 1) {
    x = infoBox.value;
    x = -Math.abs(x);
    infoBox.value = x;
  } else {
    x = infoBox.value;
    x = Math.abs(x);
    infoBox.value = x;
  }
}

function product(x) {
  x = infoBox.value;
  x = eval(x);
  infoBox.value = x;
}

function mutiplyBy() {
  x = infoBox.value;
  x = eval(x * x);
  infoBox.value = x;
}

function backspace() {
  var character = infoBox.value;
  var size = character.length - 1;
  var newCharacter = character.substring(0, size);
  infoBox.value = newCharacter;
}

function mutiplyBy2(x) {
  x = infoBox.value;
  x = x / 100;
  infoBox.value = x;
}

/*function mutiplyBy2 (x){
	x = infoBox.value;
	x = x/100 * 10;
	infoBox.value = x.toFixed(1);
}*/


function sqrt(x) {
  x = infoBox.value;
  x = Math.sqrt(x);
  infoBox.value = x;
}
#move {
  margin-top: 150px;
  margin-left: auto;
  margin-right: auto;
  border: 5px solid grey;
  border-radius: 10px;
  background: grey;
}

body {
  background-image: url("https://static.pexels.com/photos/27665/pexels-photo-27665.jpg");
  background-size: 1600px 780px;
  background-repeat: no-repeat;
}

h1 {
  text-align: center;
}

#dimensions {
  width: 165px;
}

.size2 {
  width: 30px;
  cursor: hand;
  cursor: pointer;
}
<h1>FreecodeCamp Calculator Project</h1>
<table id="move">
  <form>
    <tr>
      <th>
        <input type="text" id="screen" disabled>
      </th>
    </tr>
    <tr>
      <td>
        <input class="size2" type="button" value="MC">
        <input class="size2" type="button" value="MR">
        <input class="size2" type="button" value="MS">
        <input class="size2" type="button" value="M+">
        <input class="size2" type="button" value="M-">
      </td>
    </tr>
    <td>
      <input class="size2" type="button" value="&#8592;" onclick="backspace()">
      <input class="size2" type="button" value="CE" onclick="backspace()">
      <input class="size2" type="button" value="C" onclick="addscreen('C')">
      <input class="size2" type="button" value="&plusmn;" onclick="changesign('&plusmn')">
      <input class="size2" type="button" value="&#8730;" onclick="sqrt()">
    </td>
    </tr>
    <tr>
      <td>
        <input class="size2" type="button" value="7" onclick='addscreen("7")'>
        <input class="size2" type="button" value="8" onclick="addscreen('8')">
        <input class="size2" type="button" value="9" onclick="addscreen('9')">
        <input class="size2" type="button" value="/" onclick="addscreen('/')">
        <input class="size2" type="button" value="%" onclick="mutiplyBy2()">
      </td>
    </tr>
    <tr>
      <td>
        <input class="size2" type="button" name="" value="4" onclick="addscreen('4')">
        <input class="size2" type="button" name="" value="5" onclick="addscreen('5')">
        <input class="size2" type="button" name="" value="6" onclick="addscreen('6')">
        <input class="size2" type="button" name="" value="*" onclick="addscreen('*')">
        <input class="size2" type="button" name="" value="x^2" onclick="mutiplyBy()">
      </td>
    </tr>
    <tr>
      <td>
        <input class="size2" type="button" name="" value="1" onclick="addscreen('1')">
        <input class="size2" type="button" name="" value="2" onclick="addscreen('2')">
        <input class="size2" type="button" name="" value="3" onclick="addscreen('3')">
        <input class="size2" type="button" name="" value="-" onclick="addscreen('-')">
        <input class="size2" type="button" name="" value="=" onclick="product()">
      </td>
    </tr>
    <tr>
      <td>
        <input class="size2" type="button" name="" value="0" onclick="addscreen('0')">
        <input class="size2" type="button" name="" value="." onclick="addscreen('.')">
        <input class="size2" type="button" name="" value="+" onclick="addscreen('+')">
      </td>
    </tr>
  </form>
</table>

2
  • 3
    When you get a value from an input it is a strong. Use parseInt to convert it to an integer. Jul 18, 2017 at 9:06
  • 1
    parseInt won't do, because you are creating a string out of all inputs. What you need to do is keep the last value kind of separate and change it. That way you can append it and manipulate later on. Btw: For better readability I would recommend to properly indent your code :)
    – lumio
    Jul 18, 2017 at 9:08

2 Answers 2

0

I think you have a semantic problem. You take the whole expression but in a normal calculator, the ± means to change the sign of the last number. I change your changeNum function like this :

function changeNum() {
  let x = infoBox.value;
  let regex = /^\d+$|(.*)([-+]\d+)$/;
  let last = (x.match(regex));
  if (last !== null) {
    let n = isNaN(last[2]) ? last[0] : last[2]; //1st part of the regex ?
    let newVal = (eval(-eval(n))); // Sign inversion 
    if (newVal > 0) // Force to print the + behind the number
      newVal = "+" + newVal;
    infoBox.value = x.replace(regex, "$1" + newVal);
  }
}

Regex xplantation : The regex means to take the number that begins the expression (like "1") or to take the last number with it sign (like -1+2, it will take +2).

The ternary expression permits to know in which case we are.

Have a good day.

0

change changeNum like below:

function changeNum(x) {
  x = infoBox.value;
  if(!isNaN(x)){
    x = Math.sign(x);
    if (x === 1) {
      x = infoBox.value;
      x = -Math.abs(x);
      infoBox.value = x;
    } else {
      x = infoBox.value;
      x = Math.abs(x);
      infoBox.value = x;
    }
  }
}

1
  • Cylexx solution solved it. Thanks everyone for helping me with this coding issue.
    – AJAX101
    Jul 19, 2017 at 11:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.