javascript - 无法获得加号/减号按钮以正常工作 javascript

Question

对于以下问题，我将不胜感激。当我在我的计算器中输入我的字符串时，它显示 Nan 和下一个整数，例如从 -1 + 2 到 -1 + -2 它显示 Nan。我使用 Math.abs() 将我的值更改为负值或正值。

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>

Answer 1

我认为你有语义问题。您采用整个表达式，但在普通计算器中，± 表示更改最后一个数字的符号。我像这样更改您的 changeNum 函数:

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);
  }
}

正则表达式 xplantation :正则表达式的意思是取表达式开头的数字(如“1”)或取最后一个带符号的数字(如 -1+2，它将取 +2)。

三元表达式允许我们知道我们在哪种情况下。

祝你有美好的一天。