无法获得正/负按钮以正常工作javascript

时间:2017-07-18 09:04:02

标签: javascript html css

感谢您对以下问题的任何帮助。当我在我的计算器中输入我的字符串时,它显示Nan,下一个整数ex变化-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>

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

我认为你有一个语义问题。您可以采用整个表达式,但在普通计算器中,±表示更改最后一个数字的符号。我改变你的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)。

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

祝你有个美好的一天。