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 += ' '">

Please include your javascript that goes along with your HTML. — ryanyuyu
– ryanyuyu, Commented Feb 10, 2015 at 14:56
you need to add a new input button and call some function OnClick="nameOfYourFunction()" — gabriel
– gabriel, Commented Feb 10, 2015 at 14:57

Alan Barrows · Accepted Answer · 2015-02-10 15:04:19Z

3

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.

edited Feb 10, 2015 at 15:04

answered Feb 10, 2015 at 14:57

Alan Barrows

6094 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brodie · Accepted Answer · 2015-02-10 15:01:40Z

0

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. :)

answered Feb 10, 2015 at 15:01

Brodie

8,7979 gold badges38 silver badges55 bronze badges

1 Comment

Mr.Kelly Over a year ago

Thank you for your response. There is a National Test that uses an input calculator for students to show their equation. It doesn't function as a calculator, just an input area. I was trying to create something that gives students that practice on an iPad, so when the test come along the technology isn't what is slowing them down. These are elementary students. Now I can use questions from their everyday lessons to have them get acclimated to the technology. I took this script above and created a widget for ibooks. I am also not a html / java writer so I really appreciate your help.

SamiunNafis · Accepted Answer · 2020-02-28 17:30:26Z

0

Try this

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

answered Feb 28, 2020 at 17:30

SamiunNafis

1572 silver badges11 bronze badges

Collectives™ on Stack Overflow

Adding a "Delete" Button to my Calculator

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related