Help With Code

[CadmarLegend]

So, I was tinkering around with HTML, CSS, and Javascript this morning. Just for the fun of it. I decided to make a calculator. And, the calculating part went really well.

I started with a basic calculator: Multiplication, Division, Addition, Subtraction, Number 0 - 9, equal sign, and the Clear All button.

Then, I decided to also add in parenthesis and a Pi button. That also went pretty well.

However, I realized that the Clear All button wasn't that useful if you had long pieces of equations. I then decided to make a "BackSpace" button where it would only delete the number right at the end, and so on. But I don't know how I'd be able to do that. What function should I use for the javascript?

Here's the code:

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

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
}

function clr()
{
document.getElementById("result").value = " "
}

function back() {
    var value = document.getElementById().value;
    document.getElementById().value = value.substr(0, value.length - 1);
}

.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=title>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>

 

[CadmarLegend]

Anyone? I went to stackoverflow but didn't get an answer

 

[GodlessEmperor]

Anyone? I went to stackoverflow but didn't get an answer

Look, I may write trash but JS is a bit much even for me...
Maybe this helps, looks like what you want to do

https://stackoverflow.com/questions/32126778/i-need-to-create-a-backspace-function-for-my-calculator-with-javascript

OR

function back() {
var value = document.getElementById("d").value;
document.getElementById("d").value = value.substr(0, value.length - 1);
}

 

[CadmarLegend]

Look, I may write trash but JS is a bit much even for me...
Maybe this helps, looks like what you want to do

https://stackoverflow.com/questions/32126778/i-need-to-create-a-backspace-function-for-my-calculator-with-javascript

OR

function back() {
var value = document.getElementById("d").value;
document.getElementById("d").value = value.substr(0, value.length - 1);
}

It doesn't work. argh. and that's one of the sources I looked at originally. when in doubt, search the old tech forums of stackoverflow.