文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >在javascript中创建的基本计算器..使用警报通知用户任何错误。可能的错误包括：

问在javascript中创建的基本计算器..使用警报通知用户任何错误。可能的错误包括：
EN

Stack Overflow用户
提问于 2018-09-25 06:01:46
回答 3查看 1.6K关注 0票数 0

我已经在JavaScript中创建了一个基本的4函数计算器，现在我需要使用一个警告来告诉用户任何错误。可能的错误包括：

  1. 一个或两个输入字段为空，一个或两个输入字段< -9999或大于9999
  4. 非法字符在任一输入字段中。只允许0、1、2、3、4、5、6、7、8、9和-。

代码：

​

代码语言：javascript
复制
function multiplyBy() {
  num1 = document.getElementById("firstNumber").value;
  num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = num1 * num2;
}

function divideBy() {
  num1 = document.getElementById("firstNumber").value;
  num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = num1 / num2;
}

function additionBy() {
  num1 = parseInt(document.getElementById("firstNumber").value);
  num2 = parseInt(document.getElementById("secondNumber").value);
  document.getElementById("result").innerHTML = num1 + num2;
}

function subtractionBy() {
  num1 = parseInt(document.getElementById("firstNumber").value);
  num2 = parseInt(document.getElementById("secondNumber").value);
  document.getElementById("result").innerHTML = num1 - num2;
}
代码语言：javascript
复制
body {
  margin: 30px;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html>
<head>
<body>
  <form>
    1st Number : <input type="text" id="firstNumber"> 2nd Number: <input type="text" id="secondNumber"> The Result is :
    <span id="result"></span>
    <br>
    </br>
    <br>
    <input type="button" onClick="multiplyBy()" Value="Multiply" />
    <input type="button" onClick="divideBy()" Value="Divide" />
    <input type="button" onClick="additionBy()" Value="Add" />
    <input type="button" onClick="subtractionBy()" Value="Sub" />
    </br>
  </form>
<script type="text/javascript" src="fourth.js">
   </script>
</body>
</html>

​

javascript
EN

回答 3

Stack Overflow用户

发布于 2018-09-25 06:38:02

首先，将输入标记类型定义为number，如下所示

代码语言：javascript
复制
1st Number : <input type="number" id="firstNumber" >
2nd Number: <input type="number" id="secondNumber" >

因此，在这种情况下，用户将无法输入无效输入。

其次，只在函数中检查除以零的条件

票数 1
EN

Stack Overflow用户

发布于 2018-09-25 06:46:57

您正在寻找的是一个验证模式。

要检查输入是否有效，可以在数学函数开始时执行检查。例如

代码语言：javascript
复制
var $num1 = document.getElementById("firstNumber");
var $num2 = document.getElementById("secondNumber");
var $result = document.getElementById("result");

function checkValid(division){
  var num1 = $num1.value;
  var num2 = $num2.value;

  if(num1 == null || num1 > 9999 || num1 < -9999){
    return false;
  }

  if(num2 == null || num2 > 9999 || num2 < -9999){
    return false;
  }

  if(division && num2 === 0){
    return false
  }
}

function multiplyBy() {
  if(check()){
    num1 = $num1.value;
    num2 = $num2.value;
    $result.innerHTML = num1 * num2;
  } else {
    alert('some error message');
  }
}

然后在你的分区函数中调用check(true)

这只是处理它的一种方法。您可以在返回之前在check函数中调用alert，甚至可以从check函数返回错误消息。这应该会朝着正确的方向发展。

另外，我也推荐哈桑对<input type="number">的修改。

票数 0
EN

Stack Overflow用户

发布于 2018-09-25 20:07:30

您可以获得一些用于验证的库，但让我们从简单的开始。重新编写代码以删除重复的代码，然后添加函数来进行验证。

这只是一个开始，不是一个完整的解决方案，你必须做工作。我将把添加所需的其他验证留给您，但您可以看到如何使用我添加的这对夫妇进行验证。

​

代码语言：javascript
复制
function showResults(results) {
  document.getElementById("result").innerHTML = results;
}

function multiplyBy(number1, number2) {
  num1 = number1.value;
  num2 = number2.value;
  showResults(num1 * num2);
}

function divideBy(number1, number2) {
  num1 = number1.value;
  num2 = number2.value;
  showResults(num1 / num2);
}

function additionBy(number1, number2) {
  num1 = parseInt(number1.value, 10);
  num2 = parseInt(number2.value, 10);
  showResults(num1 + num2);
}

function subtractionBy(number1, number2) {
  num1 = parseInt(number1.value, 10);
  num2 = parseInt(number2.value, 10);
  showResults(num1 - num2);
}

function actionClicker() {
  let number1 = document.getElementById("firstNumber");
  let number2 = document.getElementById("secondNumber");
  validateNumber(number1);
  validateNumber(number2);
  var attribute = this.getAttribute("data-myattribute");
  var expr = attribute;
  switch (expr) {
    case 'multiply':
      multiplyBy(number1, number2);
      break;
    case 'division':
      divideBy(number1, number2);
      break;
    case 'subtract':
      subtractionBy(number1, number2);
      break;
    case 'addition':
      additionBy(number1, number2);
      break;
    default:
      console.log('Sorry, we do not find ' + expr + '.');
  }
}

function showValidationMessage(message) {
  alert(message);
}

function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function isEmpty(n) {
  return n === "";
}

function isInRange(n) {
  if (isNumeric(n) && !isEmpty(n)) {
    num = parseInt(n, 10);
    return num >= -9999 && num <= 9999;
  }
  return false;
}

function validateNumber(el) {
  let hasError = false;
  el.classList.remove("has-error");
  // add your validation
  let message = "get stuff better";
  if (!isNumeric(el.value)) {
    message = "Not a number.";
    hasError = true;
  }
  if (isEmpty(el.value)) {
    message = "Not a number, cannot be empty.";
    hasError = true;
  }
  if (hasError) {
    el.classList.add("has-error");
    showValidationMessage(message);
  }
}

function modifyNumbers(event) {
  let el = event.target;
  validateNumber(el);
}
var num1 = document.getElementById("firstNumber");
var num2 = document.getElementById("secondNumber");
var buttons = document.getElementsByClassName('actions');
// add event listener to buttons
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', actionClicker, false);
}
num1.addEventListener("change", modifyNumbers, false);
num2.addEventListener("change", modifyNumbers, false);
代码语言：javascript
复制
body {
  margin: 30px;
}

.buttons {
  margin: 2em;
}

label {
  padding-right: 1em;
  padding-left: 1em
}

.has-error {
  background-color: lightpink;
  border: solid red 1px;
}

.numbers {
  width: 11em;
}
代码语言：javascript
复制
<body>
  <form>
    <label for="firstNumber">1st Number:</label><input class="numbers" type="number" id="firstNumber" placeholder="Min: -9999, max: 9999" min="-9999" max="9999" /><span class="validity"></span><label for="secondNumber">2nd Number:</label><input class="numbers"
      type="number" id="secondNumber" placeholder="Min: -9999, max: 9999" min="-9999" max="9999" /><span class="validity"></span>
    <div><label>The Result is:</label>
      <div id="result"></div>
    </div>
    <div class="buttons">
      <button type="button" class="actions" id="multiply" data-myattribute="multiply">Multiply</button>
      <button type="button" class="actions" id="divide" data-myattribute="division">Divide</button>
      <button type="button" class="actions" id="add" data-myattribute="addition">Add</button>
      <button type="button" class="actions" id="subtract" data-myattribute="subtract">Sub</button>
    </div>
  </form>
</body>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/52487947

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档