为什么我的JS计算中不能放一个以上的点

Question

为什么我的JS计算中不能放一个以上的点

我正在制作计算器，但是...我可以在第一个数字上添加两个点，但是不能在第二个数字上添加点。我想念一些东西，但不知道。

我尝试了不同的方法，但没有任何效果。

也许我必须尝试另一种方式来做，或者我错过了点的某些条件。另一件事是我无法使用“退格键”删除一个数字，而我使用了“ del”键。

function insert(num) {
  const lastChar = document.form.textview.value;

  if ((!document.form.textview.value || isNaN(lastChar)) && isNaN(num)) {
    return '';
  }

  document.form.textview.value += num;
};

function equal() {
  let exp = document.form.textview.value;
  if (exp) {
    document.form.textview.value = eval(exp);
    return '';
  }
};

function clean() {
  document.form.textview.value = "";
}

function back() {
  let exp = document.form.textview.value;
  document.form.textview.value = exp.substring(0, exp.length - 1);
  return '';
}

document.addEventListener('keydown', function(n) {
  let stringChar = n.key;
  let numChar = Number(n);

  switch (stringChar) {
    case '0':
    case '1':
    case '2':
    case '3':
    case '4':
    case '5':
    case '6':
    case '7':
    case '8':
    case '9':
    case '-':
    case '+':
    case '/':
    case '*':
      insert(stringChar);
      break;
    case '.':
      let text = document.form.textview.value;
      if (!text.includes('.') && text.length) {
        document.form.textview.value += '.';
      } else if (text.includes('.') && (text.indexOf('.') <= text.length - 1)) {
        document.form.textview.value += '.';
      }
      break;
    case 'Enter':
      equal(numChar);
      break;
    case 'Delete':
      back(numChar);
      break;
  }

});

Run Code Online (Sandbox Code Playgroud)

body {
  padding: 0;
  margin: 0;
  background: #c0c0c0;
}

.button {
  width: 50px;
  height: 50px;
  font-size: 22px;
  margin: 3px;
  cursor: pointer;
  border-radius: 5px;
  background: #e6e6e6;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
}

.button:hover {
  background: #cecece;
}

.button:focus {
  outline: 0;
}

.btn {
  width: 110px;
}

.textview {
  width: 218px;
  margin: 5px;
  font-size: 26px;
  padding: 10px 5px;
  box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .5);
  border-radius: 6px;
  background: #e6e6e6;
  color: rgb(0, 0, 0);
}

.main {
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: #858585;
}

Run Code Online (Sandbox Code Playgroud)

<body>
  <div class="main">
    <form name="form">
      <input class="textview" name="textview" disabled>
    </form>

    <table>
      <tr>
        <td><input class="button" type="button" value="CE" onclick="insert(clean())"></td>
        <td><input class="button" type="button" value="C" onclick="insert(clean())"></td>
        <td><input class="button" type="button" value="<" onclick="insert(back())"></td>
        <td><input class="button" type="button" value="/" onclick="insert('/')"></td>
      </tr>
      <tr>
        <td><input class="button" type="button" value="7" onclick="insert(7)"></td>
        <td><input class="button" type="button" value="8" onclick="insert(8)"></td>
        <td><input class="button" type="button" value="9" onclick="insert(9)"></td>
        <td><input class="button" type="button" value="*" onclick="insert('*')"></td>
      </tr>
      <tr>
        <td><input class="button" type="button" value="4" onclick="insert(4)"></td>
        <td><input class="button" type="button" value="5" onclick="insert(5)"></td>
        <td><input class="button" type="button" value="6" onclick="insert(6)"></td>
        <td><input class="button" type="button" value="-" onclick="insert('-')"></td>
      </tr>
      <tr>
        <td><input class="button" type="button" value="1" onclick="insert(1)"></td>
        <td><input class="button" type="button" value="2" onclick="insert(2)"></td>
        <td><input class="button" type="button" value="3" onclick="insert(3)"></td>
        <td><input class="button" type="button" value="+" onclick="insert('+')"></td>
      </tr>
      <tr>
        <td colspan="2"><input class="button btn" type="button" value="0" onclick="insert(0)"></td>
        <td><input class="button" type="button" value="." onclick="insert('.')"></td>
        <td><input class="button" type="button" value="=" onclick="insert(equal())"></td>
      </tr>
    </table>
  </div>

</body>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Min*_*yen 1

因为当你输入两个点isNaN(lastChar)和isNaN(num)is时true，insert(num)返回而不打印。您可以使用检查eval语法try catch。如果catch不打印“not number char”，如果不catch则不打印.。如果最后一个索引.大于char 的最后一个索引不是 number 且不是.，例如1.2，或者1.2+1.您不导入.。抱歉我的英语不好。尝试一下：

function insert(num) {
  const lastChar = document.form.textview.value;
  if(lastChar){
    try {
        eval(lastChar);
        if(lastIndexNotNumberCharInString(lastChar) < lastChar.lastIndexOf('.') && num == '.'){
            return '';
        }
    } catch (e) {
        if (isNaN(num)) {
           return '';
        }
    }
  }else{
     if(isNaN(num)){
         return '';
     }
  }

  document.form.textview.value += num;
};

function lastIndexNotNumberCharInString(char){
    var j = -1;
    for (var i = 0; i < char.length; i++) {
      if(isNaN(char.charAt(i)) && char.charAt(i) != '.'){
         j = i;
      }
    }
    return j;
}

function equal() {
  let exp = document.form.textview.value;
  if (exp) {
    document.form.textview.value = eval(exp);
    return '';
  }
};

function clean() {
  document.form.textview.value = "";
}

function back() {
  let exp = document.form.textview.value;
  document.form.textview.value = exp.substring(0, exp.length - 1);
  return '';
}

document.addEventListener('keydown', function(n) {
  let stringChar = n.key;
  let numChar = Number(n);

  switch (stringChar) {
    case '0':
    case '1':
    case '2':
    case '3':
    case '4':
    case '5':
    case '6':
    case '7':
    case '8':
    case '9':
    case '-':
    case '+':
    case '/':
    case '*':
      insert(stringChar);
      break;
    case '.':
      let text = document.form.textview.value;
      if (!text.includes('.') && text.length) {
        document.form.textview.value += '.';
      } else if (text.includes('.') && (text.indexOf('.') <= text.length - 1)) {
        document.form.textview.value += '.';
      }
      break;
    case 'Enter':
      equal(numChar);
      break;
    case 'Delete':
      back(numChar);
      break;
  }

});

Run Code Online (Sandbox Code Playgroud)

body {
  padding: 0;
  margin: 0;
  background: #c0c0c0;
}

.button {
  width: 50px;
  height: 50px;
  font-size: 22px;
  margin: 3px;
  cursor: pointer;
  border-radius: 5px;
  background: #e6e6e6;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
}

.button:hover {
  background: #cecece;
}

.button:focus {
  outline: 0;
}

.btn {
  width: 110px;
}

.textview {
  width: 218px;
  margin: 5px;
  font-size: 26px;
  padding: 10px 5px;
  box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .5);
  border-radius: 6px;
  background: #e6e6e6;
  color: rgb(0, 0, 0);
}

.main {
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: #858585;
}

Run Code Online (Sandbox Code Playgroud)

<body>
  <div class="main">
    <form name="form">
      <input class="textview" name="textview" disabled>
    </form>

    <table>
      <tr>
        <td><input class="button" type="button" value="CE" onclick="clean()"></td>
        <td><input class="button" type="button" value="C" onclick="clean()"></td>
        <td><input class="button" type="button" value="<" onclick="insert(back())"></td>
        <td><input class="button" type="button" value="/" onclick="insert('/')"></td>
      </tr>
      <tr>
        <td><input class="button" type="button" value="7" onclick="insert(7)"></td>
        <td><input class="button" type="button" value="8" onclick="insert(8)"></td>
        <td><input class="button" type="button" value="9" onclick="insert(9)"></td>
        <td><input class="button" type="button" value="*" onclick="insert('*')"></td>
      </tr>
      <tr>
        <td><input class="button" type="button" value="4" onclick="insert(4)"></td>
        <td><input class="button" type="button" value="5" onclick="insert(5)"></td>
        <td><input class="button" type="button" value="6" onclick="insert(6)"></td>
        <td><input class="button" type="button" value="-" onclick="insert('-')"></td>
      </tr>
      <tr>
        <td><input class="button" type="button" value="1" onclick="insert(1)"></td>
        <td><input class="button" type="button" value="2" onclick="insert(2)"></td>
        <td><input class="button" type="button" value="3" onclick="insert(3)"></td>
        <td><input class="button" type="button" value="+" onclick="insert('+')"></td>
      </tr>
      <tr>
        <td colspan="2"><input class="button btn" type="button" value="0" onclick="insert(0)"></td>
        <td><input class="button" type="button" value="." onclick="insert('.')"></td>
        <td><input class="button" type="button" value="=" onclick="insert(equal())"></td>
      </tr>
    </table>
  </div>

</body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，11 月前
查看次数：	145 次
最近记录：	6 年，11 月前