如果我的 html/javascript/css 计算器上的数字不兼容,如何添加“语法错误”?

Posted

技术标签:

【中文标题】如果我的 html/javascript/css 计算器上的数字不兼容,如何添加“语法错误”?【英文标题】:How do I add "Syntax Error" if the numbers aren't compatible on my html/javascript/css calculator? 【发布时间】:2022-01-11 07:06:06 【问题描述】:

所以,我想这样做,如果由于某种原因,人们在我的计算器上输入错误/点击错误,它会显示语法错误。但是,我不知道该怎么做。

我所说的“输入错误”是指某人可能不小心写了如下内容:

10 + / 10

当他们真正想写 10 + 10 时。

目前,我的计算器只显示出现错误时输入的方程式,不做任何其他事情。为了效率,我只是想添加该功能。

function dis(val) 
  document.getElementById("result").value += val


function solve() 

  let x = document.getElementById("result").value
  let y = eval(x)
  document.getElementById("result").value = y


function clr() 
  document.getElementById("result").value = " "
.title 
  margin-bottom: 10px;
  text-align: center;
  width: 100%;
  color: Black;
  border: solid gray 2px;
  font-size: 30px


input[type="button"] 
  background-color: gray;
  color: black;
  border: solid black 2px;
  width: 100%;
  font-size: 30px


input[type="button"]:hover 
  background-color: #D3D3D3;
  cursor: pointer;


input[type="text"] 
  background-color: white;
  border: solid black 2px;
  width: 100%;
  font-size: 30px
<div class=t itle>Calculator</div>
<table border="10" style="width:100%;">
  <tr>
    <td colspan="3"><input type="text" id="result" /></td>
  </tr>
  <tr>
    <td><input type="button" value="1" onclick="dis('1')" /> </td>
    <td><input type="button" value="2" onclick="dis('2')" /> </td>
    <td><input type="button" value="3" onclick="dis('3')" /> </td>
    <td><input type="button" value="/" onclick="dis('&nbsp;/&nbsp;')" /> </td>
    <td><input type="button" value="c" onclick="clr()" /> </td>
  </tr>
  <tr>
    <td><input type="button" value="4" onclick="dis('4')" /> </td>
    <td><input type="button" value="5" onclick="dis('5')" /> </td>
    <td><input type="button" value="6" onclick="dis('6')" /> </td>
    <td><input type="button" value="(" onclick="dis('(')" /> </td>
    <td><input type="button" value=")" onclick="dis(')')" /> </td>
    </td>
  </tr>
  <tr>
    <td><input type="button" value="7" onclick="dis('7')" /> </td>
    <td><input type="button" value="8" onclick="dis('8')" /> </td>
    <td><input type="button" value="9" onclick="dis('9')" /> </td>
    <td><input type="button" value="+" onclick="dis('&nbsp;+&nbsp;')" /> </td>
    <td><input type="button" value="-" onclick="dis('&nbsp;-&nbsp;')" />
  </tr>
  <tr>
    <td><input type="button" value="." onclick="dis('.')" /> </td>
    <td><input type="button" value="0" onclick="dis('0')" /> </td>
    <td><input type="button" value="=" onclick="solve()" /> </td>
    <td><input type="button" value="×" onclick="dis('&nbsp*&nbsp;')" /> </td>
    <td><input type="button" value="π" onclick="dis('3.1415926535')"></td>
  </tr>
</table>

【问题讨论】:

【参考方案1】:

您可以使用 REGEX 检测语法错误,例如检测无效的数学表达式。您还可以将 eval 包装在 try catch 块中,因为无效的表达式会引发错误。

使用 try/catch 的示例

function solve()

  let x = document.getElementById("result").value
  let y;
  try 
    y = eval(x)
   catch (error) 
    alert("Syntax error");
    return;
  

  document.getElementById("result").value = y 

然后要提醒用户,您可以使用alert function 提醒用户或在 div 中显示文本,与设置结果的方式相同。有语法错误。

但是,我认为您的计算器存在一些基本问题。我认为从一开始就阻止用户做出无效的表达会更合适。

【讨论】:

谢谢。它解决了我的小问题。我只是在尝试制作一个基本的计算器,然后决定添加更多的东西,比如 pi 和括号。基本上,我只是想用它来试验一下,看看我使用 javascript 有多“正确”,因为它并不是我的专长。

以上是关于如果我的 html/javascript/css 计算器上的数字不兼容,如何添加“语法错误”?的主要内容,如果未能解决你的问题,请参考以下文章

在 NativeScript 应用程序中加载本地 HTML/JavaScript/CSS

HTML+Javascript+CSS 渲染是一个很好的移动应用框架吗? [关闭]

如何在 Amazon Beanstalk 和 Tomcat 上启用 HTML/JavaScript/CSS 的 gzip

ROOKIE A​​LERT (Learning HTML5/ JavaScript/ CSS from a book): 为啥我的视频文件不能在 Firefox 中加载和播放(使用 Win 8,av

无法在 moSync 中应用 css

使用 html、javascript、css 制作 IOS 应用程序