Adding a "Delete" Button to my Calculator

Question

I am a teacher trying to make an equation editor for students to input their equations. I found a free script online that makes a calculator and then I edited it for my own use but I am not able to add a delete last entered button.

I would really like to add a delete last input button or an undo button. This is what I have so far and I have no clue what the string should be for the button...

Any help is much appreciated.

Thank you.

<FORM NAME="Calc">
<TABLE BORDER=9>
<TR>
<TD>
<INPUT TYPE="text"   style="width: 380px;height: 50px;font-size: 22px;" NAME="Input" Size="45">
<br>
</TD>
</TR>
<TR>
<TD>

<INPUT TYPE="button" style="width: 70px;height: 100px;font-size: 18px;" NAME="clear" VALUE="  Clear  " OnClick="Calc.Input.value = ''">
<br>
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="one"   VALUE="  1  " OnClick="Calc.Input.value += '1'">
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="two"   VALUE="  2  " OnCLick="Calc.Input.value += '2'">
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="three" VALUE="  3  " OnClick="Calc.Input.value += '3'">
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="plus"  VALUE="  +  " OnClick="Calc.Input.value += '+'">
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="minus" VALUE="  -  " OnClick="Calc.Input.value += '-'">
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="times" VALUE="  x  " OnClick="Calc.Input.value += 'X'">
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="div"   VALUE="  ÷  " OnClick="Calc.Input.value += '÷'">
<br>
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="four"  VALUE="  4  " OnClick="Calc.Input.value += '4'">
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="five"  VALUE="  5  " OnCLick="Calc.Input.value += '5'">
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="six"   VALUE="  6  " OnClick="Calc.Input.value += '6'">
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="Less"   VALUE="  <  " OnClick="Calc.Input.value += '<'">
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="Equal"  VALUE="  =  " OnClick="Calc.Input.value += '='">
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="Greater"  VALUE="  >  " OnClick="Calc.Input.value += '>'">
<br>
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="seven" VALUE="  7  " OnClick="Calc.Input.value += '7'">
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="eight" VALUE="  8  " OnCLick="Calc.Input.value += '8'">
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="nine"  VALUE="  9  " OnClick="Calc.Input.value += '9'">
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="("  VALUE="  (  " OnClick="Calc.Input.value += '('">
<INPUT TYPE="button" style="width: 50px;height: 200px;font-size: 18px;" NAME=")"  VALUE="  )  " OnClick="Calc.Input.value += ')'">
<INPUT TYPE="button" style="width: 50px;height: 200px;font-size: 18px;" NAME="Fraction"  VALUE="  ¼  " OnClick="Calc.Input.value += '/'">
<br>
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="Dot"  VALUE="  .  " OnClick="Calc.Input.value += '.'">
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="Dash"  VALUE="  -  " OnClick="Calc.Input.value += '-'">
<INPUT TYPE="button" style="width: 50px;height: 100px;font-size: 18px;" NAME="zero"  VALUE="  0  " OnClick="Calc.Input.value += '0'">
<INPUT TYPE="button" style="width: 70px;height: 100px;font-size: 18px;" NAME="Space"  VALUE="  Space  " OnClick="Calc.Input.value += ' '">

Answer 1

Try this

<input type="button"  onclick="document.calc.Input.value = document.calc.Input.value.slice(0, -1)" value="C">

Answer 2

Give this a go

<INPUT TYPE="button" style="width: 70px;height: 100px;font-size: 18px;" NAME="Delete"  VALUE="  Delete" OnClick="Calc.Input.value = Calc.Input.value.substring(0, Calc.Input.value.length - 1)">

and what Brodie says is good advice.

Answer 3

This probably wasn't the best calculator online to borrow from. You usually want to separate your javascript from your markup, rather than have everything in line like this. What Alan suggests is probably the only real solution without making you split out the JS into it's own. However, inline js is usually not a good way to go. If this is just for usage purposes this should work fine, but if you're teaching the kids about writing a calculator in JS, then I would look for a much better example that had the JavaScript, HTML (markup), and CSS (styles) separated out into their own entities. This would be a great OOP project for the kids. :)