How do I add "Syntax Error" if the numbers aren't compatible on my html/javascript/css calculator?

user_17596773 0
Viewed 76

So, I wanted to make it so that if, for some reason, people mistyped/misclicked something on my calculator, it would show a syntax error. However, I do not know how to do so.

What I mean by "mistyped" is when someone might have accidentally written something like:

10 + / 10

when they actually wanted to write 10 + 10.

Currently, my calculator just shows the equation inputted when there is an error, and doesn't do anything else. I just want to add the function for efficiency's sake.

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>

calculator html-table css html javascript
1 Answers

You can detect that there's a syntax error with a REGEX for example to detect an invalid mathematical expression. You could also wrap the eval in a try catch block as an invalid expression would throw an error.

Example using 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 
}

Then to alert the user you can use the alert function to alert the user or show the text in a div, the same way you set the result. that there's a syntax error.

However I think there's some fundamental issues with your calculator. I think it would be more appropriate to block users from making invalid expressions from the start instead.

user_82177310
Related