无法获得加号/减号按钮以正常工作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){ 
 
\t x = infoBox.value; 
 
\t x = x/100 * 10; 
 
\t 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）。

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

祝您有美好的一天。

Answer 2

变化changeNum象下面这样：

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