We Keep Coding

Set up an Onclick event handler by HTML for undo link

I want to set up and write an onclick event handler by HTML for the undo link. Delete the last ordered item for every clicking of the undo link and update total quantity. And cancel the onclick event at the end of the event handler (i.e. clicking the link will not go to any destination, not even an internal link).
How should I modify my script to make these possible? Thanks!
<div id="Sushi" class="tabcontent">
<form action="#" method="get">
<table border="0" style="width:100%">
<tr>
<td>
<img src="sushi-1.jpg" id="su1-img" title="Sushi Set A">
<input id="su1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
<input id="su1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
</td>
<td>
<img src="sushi-2.jpg" id="su2-img" title="Sushi Set B">
<input id="su2-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
<input id="su2" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
</td>
<td>
<img src="sushi-3.jpg" id="su3-img" title="Sushi Set C" width="125" height="135">
<input id="su3-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
<input id="su3" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
</td>
</tr>
<tr>
<td rowspan="3">
<img src="sushi-4.jpg" id="su4-img" title="Sushi Set D">
<input id="su4-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
<input id="su4" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
</td>
</tr>
</table>
</form>
</div>
<div id="Drinks" class="tabcontent">
<form action="#" method="get">
<table border="0" style="width:100%">
<tr>
<td>
<img src="drink-1.jpg" id="dr1-img" title="Guava juice">
<input id="dr1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
<input id="dr1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
</td>
<td>
<img src="drink-2.jpg" id="dr2-img" title="Lemonade">
<input id="dr2-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
<input id="dr2" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
</td>
<td>
<img src="drink-3.jpg" id="dr3-img" title="Orange juice" width="125" height="135">
<input id="dr3-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
<input id="dr3" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
</td>
</tr>
</table>
</form>
</div>
<div id="Dessert" class="tabcontent">
<form action="#" method="get">
<table border="0" style="width: 100%;">
<tr>
<td>
<img src="dessert-1.jpg" id="de1-img" title="Raspberry cheese cake" width="140" height="125">
<input id="de1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
<input id="de1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
</td>
</tr>
</table>
</form>
</div>
<div style="border:0px;" id="order">
<center>
<h2><b>Ordered Items</b></h2>
14 Mar 2017 15:59
<br><br>
Table:4 - No. of Guests 3
<table class="nth-table" id="orderlist" border="1">
<thread>
<tr>
<th>Description</th>
<th>Qty</th>
</tr>
</thread>
<tbody>
<tr>
</tr>
</tbody>
<tfoot>
<tr>
<td align="left"><strong>Total</strong></td>
<td align="right" id="val"><strong></strong></td>
</tr>
</tfoot>
</table>
<br>
<div class="noPrint">
undo
</div>
</center>
<br>
</div>
<script>
var total = 0;
function registerHandlers() {
var buttons = document.querySelectorAll('.button');
[].slice.call(buttons).forEach(function(button) {
button.addEventListener('click', onClick, false);
});
}
function onClick(event) {
event.preventDefault();
var button = event.target;
var id = button.id;
var desc = document.getElementById(id + '-img').getAttribute('title');
var qty = document.getElementById(id + '-qty').value;
total += parseInt(qty)
addToTable(desc, qty);
}
function addToTable(desc, qty) {
var row = '<tr><td align="left">' + desc + '</td><td align="right">' + qty + '</td></tr>';
var tbody = document.querySelector('#orderlist tbody');
tbody.innerHTML = tbody.innerHTML + row;
document.getElementById("val").innerHTML = total;
}
registerHandlers();
</script>

The procedure for adding any event handler to any element is always the same.
There are three steps:
Grab the element
Declare the function
Attach the EventListener to the element, including the callback which references the declared function
Here is an example:
// GRAB THE ELEMENT
const myUndoLink = document.getElementsByClassName('my-undo-link')[0];
// DECLARE THE FUNCTION
const myUndoFunction = () => {
[... FUNCTION HERE...]
}
// ATTACH THE EVENT LISTENER TO THE ELEMENT
myUndoLink.addEventListener('click'), myUndoFunction, false);

I want to update specific textbox value

I have some database results, I populate them in form, I have this code:
<input type='button' name='add' onclick='javascript: addQty();' value='+'/>
<span><?php echo $records['ct_qty']; ?></span>
<input type="text" class="gridder_input" name="quant[]" class="quant" id="quant[]" />
<input type='button' name='subtract' onclick='javascript: subtractQty();' value='-'/>
So I want to update specific row when the user presses the "quant" button:
function addQty() {
document.getElementById("quant").value++;
}
function subtractQty() {
if (document.getElementById("quant").value - 1 < 0) {
return;
} else {
document.getElementById("quant").value--;
}
updateQuantity();
}
This code works when I have one row, when I have 2 or more rows nothing works, so I probably have to use this word or something?

You can target the neare input using the sibling selectors.
function addQty(elm) {
elm.nextElementSibling.nextElementSibling.value++;
}
function subtractQty(elm) {
if (elm.previousElementSibling.value - 1 < 0) {
return;
} else {
elm.previousElementSibling.value--;
}
updateQuantity();
}
<input type='button' name='add' onclick='javascript: addQty(this);' value='+' />
<span><?php echo $records['ct_qty']; ?></span>
<input type="text" class="gridder_input" name="quant[]" class="quant" id="quant[]" />
<input type='button' name='subtract' onclick='javascript: subtractQty(this);' value='-' />

Ok i dont have a good enough example of your code, but this should be enough to get you in the right direction...
function getTotals() {
var table = document.getElementById('mytable');
for (i = 0; i < table.rows.length; i++) {
var quant = table.rows[i].querySelector('input[name="quant"]').value;
var priceoriginal = table.rows[i].querySelector('input[name="priceoriginal"]').value;
table.rows[i].querySelector('input[name="total"]').value = quant * priceoriginal;
}
}
<table id="mytable">
<tr>
<td>
<input name="quant" type="text" value="2">
</td>
<td>
<input name="priceoriginal" type="text" value="6">
</td>
<td>Total:
<input name="total" type="text">
</td>
</tr>
<tr>
<td>
<input name="quant" type="text" value="8">
</td>
<td>
<input name="priceoriginal" type="text" value="4">
</td>
<td>Total:
<input name="total" type="text">
</td>
</tr>
<tr>
<td>
<input name="quant" type="text" value="5">
</td>
<td>
<input name="priceoriginal" type="text" value="3">
</td>
<td>Total:
<input name="total" type="text">
</td>
</tr>
</table>
<button onclick="getTotals()">Calculate Totals</button>

Reorder specific rows of a table

Hello All and Thanks in Advance
This is my problem. I have to sort tables. One table has say total 10 rows. 3 top rows of that tables have fixed values. I want to sort the remaining 7 rows values alphabetically on the basis of first column input.
The other table has same structure. That is first column of the table has an input of type text. But in this table the problem is complex i.e. there are total 12 rows. First 2 rows are fixed. They are not going to move. And also the last row is also fixed. The remaining in between needs to be sorted alphabetically again on the basis of input in the first column.
Third table is the easiest I guess. No rows are fixed. Neither at top nor at bottom. And the rows needs to be sorted.
The table structure that I am following is as follows
<table>
<thead>
<tr>
<th>Column One Heading</th>
<th>Column Two Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' value='A fixed value' id='Heading' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='1' />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>
Kindly note that i do not want the reordering of the table rows. I only want the values inside the first two columns reordered in the rows and rows don't move. Which essentially means the hidden value of a particular row is not changed.
I don't know how to do it but what i feel is right way to go about it is fetch the values of the rows that needs to be sorted into say a JSON Array. Sort that array and then fill the rows with the data.
First Example
<table>
<thead>
<tr>
<th>Column One Heading</th>
<th>Column Two Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' value='A fixed value' id='Heading1' disabled='disabled' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='1' />
</td>
</tr>
<tr>
<td> <input type='text' value='A fixed value' id='Heading2' disabled='disabled'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='2' />
</td>
</tr>
<tr>
<td> <input type='text' value='A fixed value' id='Heading3' disabled='disabled'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='3' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading4'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='4' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading5'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='5' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading6'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='6' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading7'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='7' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading8'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='8' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading9'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='9' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading10'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='10' />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>
Second Example
<table>
<thead>
<tr>
<th>Column One Heading</th>
<th>Column Two Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' value='A fixed value' id='Heading1' disabled='disabled' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='1' />
</td>
</tr>
<tr>
<td> <input type='text' value='A fixed value' id='Heading2' disabled='disabled'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='2' />
</td>
</tr>
<tr>
<td> <input type='text' value='A fixed value' id='Heading3' disabled='disabled'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='3' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading4'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='4' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading5'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='5' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading6'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='6' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading7'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='7' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading8'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='8' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading9'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='9' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading10' value='A fixed value' disabled='disabled'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='10' />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>
Third Example
<table>
<thead>
<tr>
<th>Column One Heading</th>
<th>Column Two Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' id='Heading1' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='1' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading2' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='2' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading3'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='3' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading4'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='4' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading5'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='5' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading6'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='6' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading7'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='7' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading8'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='8' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading9'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='9' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading10' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='10' />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>

heres something real quick:
JSFiddle
http://jsfiddle.net/tcy0tmb5/
JS
function sortColumn(staticRowCount, columnToSort) {
var values = [];
$('tr').each(function(index, element) {
if (index > staticRowCount) {
var td = $(element).find('td').get(columnToSort);
values.push($(td).find('input').val());
}
});
//Do the sort
values.sort;
$('tr').each(function(index, element) {
if (index > staticRowCount) {
var val = values.shift();
//if you want to pull form the other side of the array use pop();
var td = $(element).find('td').get(columnToSort);
$(td).find('input').val(val);
}
});
}
sortColumn(3, 0);

You can add a specific class to all the elements that needs to be ordered.
If you just want to order the first elements value you can use this code, after adding a "toBeOrdered" class to the elements:
var objs = document.getElementsByClassName("toBeOrdered");
var array = [];
for ( var i = 0 ; i < objs.length ; i++ ) {
array[i] = objs[i].value;
}
array.sort();
for ( var i = 0 ; i < objs.length ; i++ ) {
objs[i].value = array[i];
}

JavaScript Calculator problems

I am messing a bit with JavaScript and decided to make a calculator. For now all I want it to do is to input what button was pressed into Answer box, but I can't make it to work, I think something is wrong with my functions, but I can't figure out what, please help...
<!DOCTYPE html>
<html>
<body>
<script>
var one = function() {
document.getElementById("input").innerHTML = "1"
}
function two() {
document.getElementById("input").innerHTML = "2"
}
function three() {
document.getElementById("input").innerHTML = "3"
}
function four() {
document.getElementById("input").innerHTML = "4"
}
function five() {
document.getElementById("input").innerHTML = "5"
}
function six() {
document.getElementById("input").innerHTML = "6"
}
function seven() {
document.getElementById("input").innerHTML = "7"
}
function eight() {
document.getElementById('input').innerHTML = "8"
}
function nine() {
document.getElementById('input').innerHTML = "9"
}
function zero() {
document.getElementById('input').innerHTML = "0"
}
function minimum() {
document.getElementById('input').innerHTML = "<"
}
function maximum() {
document.getElementById('input').innerHTML = ">"
}
function add() {
document.getElementById('input').innerHTML = "+"
}
function substract() {
document.getElementById('input').innerHTML = "-"
}
function multiply() {
document.getElementById('input').innerHTML = "*"
}
function divide() {
document.getElementById('input').innerHTML = "/"
}
function calculate() {}
function reset() {}
</script>
<table border="1">
<tr>
<td colspan="4">
<table border="1">
<tr>
<td>
<input type="text" value="Answer" id="input">
</td>
</tr>
</table>
</td>
<tr>
<td>
<input type="button" value="1" onclick="one()">
</td>
<td>
<input type="button" value="2" onclick="two()">
</td>
<td>
<input type="button" value="3" onclick="three()">
</td>
<td>
<input type="button" value="+" onclick="add()">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" onclick="four()">
</td>
<td>
<input type="button" value="5" onclick="five()">
</td>
<td>
<input type="button" value="6" onclick="six()">
</td>
<td>
<input type="button" value="- " onclick="substract()">
</td>
</tr>
<tr>
<td>
<input type="button" value="7" onclick="seven">
</td>
<td>
<input type="button" value="8" onclick="eight">
</td>
<td>
<input type="button" value="9" onclick="nine">
</td>
<td>
<input type="button" value="* " onclick="multiply()">
</td>
</tr>
<tr>
<td>
<input type="button" value="<" onclick="minimum">
</td>
<td>
<input type="button" value="0" onclick="zero">
</td>
<td>
<input type="button" value=">" onclick="maximum">
</td>
<td>
<input type="button" value="/ " onclick="divide()">
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value=" Calculate! " onclick="calculate()">
</td>
<td>
<input type="button" value="C" onclick="reset()">
</td>
</tr>
</table>
</body>
</html>

You need to set the value attribute of the input element, not the innerHTML, for example:
document.getElementById("input").value = "1"

If you want to set the value of the clicked button to the answer field, you can simply use this:
DEMO
var a = document.querySelectorAll('input[type=button]');
for (var i = 0;i<a.length;i++) {
a[i].addEventListener('click',addthis);
}
function addthis() {
document.getElementById('input').value = this.value;
}
Please note that an input field has an value you can alter, not innerHTML
And you don't need all the inline javascript in your html, querySelectorAll does the job
<table border="1">
<tr>
<td colspan="4">
<table border="1">
<tr>
<td>
<input type="text" value="Answer" id="input">
</td>
</tr>
</table>
</td>
<tr>
<td>
<input type="button" value="1" >
</td>
<td>
<input type="button" value="2" >
</td>
<td>
<input type="button" value="3" >
</td>
<td>
<input type="button" value="+" >
</td>
</tr>
<tr>
<td>
<input type="button" value="4" >
</td>
<td>
<input type="button" value="5" >
</td>
<td>
<input type="button" value="6" >
</td>
<td>
<input type="button" value="- " >
</td>
</tr>
<tr>
<td>
<input type="button" value="7" >
</td>
<td>
<input type="button" value="8">
</td>
<td>
<input type="button" value="9">
</td>
<td>
<input type="button" value="*">
</td>
</tr>
<tr>
<td>
<input type="button" value="<" >
</td>
<td>
<input type="button" value="0">
</td>
<td>
<input type="button" value=">">
</td>
<td>
<input type="button" value="/">
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value=" Calculate! ">
</td>
<td>
<input type="button" value="C" >
</td>
</tr>
</table>
</body>
</html>
As a sidenote, to make your code better maintainable, I'd change the id from your answer input field to something more precise, like "answer" as input might be a little confusing.

try:
var one = function() {
document.getElementById("input").value = "1"
}

javascript calculator on asp.net content page. Is it possible?

I have an asp.net content page and I need to write a calculator inside(?) it.
<%# Page Title="Calculator" Language="C#" AutoEventWireup="true" CodeBehind="Calculator.aspx.cs" Inherits="WebApplication2.Calculator" MasterPageFile="~/Site.Master" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"></asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<!-- calculator code here -->
</asp:Content>
I have a html page with a simple javascript calculator:
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function addvalue(arg1) {
Calc.Input.value += arg1;
}
</script>
<form action="#" name="Calc">
<table style="width: 160px" border="2">
<tr>
<td colspan="4">
<input id="Text1" type="text" maxlength=16 name="Input" style="width:98%" /></td>
</tr>
<tr>
<td style="width: 40px">
<input id="Button1" type="button" value="1" onclick="addvalue('1')" /></td>
<td style="width: 40px">
<input id="Button2" type="button" value="2" onclick="addvalue('2')" /></td>
<td style="width: 40px">
<input id="Button3" type="button" value="3" onclick="addvalue('3')" /></td>
<td>
<input id="Button7" type="button" value="+" onclick="addvalue(' + ')" /></td>
</tr>
<tr>
<td>
<input id="Button4" type="button" value="4" onclick="addvalue('4')" /></td>
<td>
<input id="Button5" type="button" value="5" onclick="addvalue('5')" /></td>
<td>
<input id="Button6" type="button" value="6" onclick="addvalue('6')" /></td>
<td>
<input id="Button8" type="button" value="-" onclick="addvalue(' - ')" /></td>
</tr>
<tr>
<td>
<input id="Button9" type="button" value="7" onclick="addvalue('7')" /></td>
<td>
<input id="Button10" type="button" value="8" onclick="addvalue('8')" /></td>
<td>
<input id="Button11" type="button" value="9" onclick="addvalue('9')" /></td>
<td>
<input id="Button12" type="button" value="*" onclick="addvalue('*')" /></td>
</tr>
<tr>
<td>
<input id="Button13" type="button" value="C" onclick="Calc.Input.value=null" /></td>
<td>
<input id="Button14" type="button" value="0" onclick="addvalue('0')" /></td>
<td>
<input id="Button15" type="button" value="=" onclick="Calc.Input.value = eval(Calc.Input.value)" /></td>
<td>
<input id="Button16" type="button" value="/" onclick="addvalue(' / ')" /></td>
</tr>
</table>
</form>
</body>
</html>
I need to adapt this code for using with an asp.net content page. How can I do it ?
I know that asp.net is server-side technology and javascript is a client-side. But I don't know how to use one inside another =\

Yes it's possible, only put the JS or Jquery script inside the content looks the code below:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<table style="width: 160px" border="2">
<tr>
<td colspan="4">
<input id="Text1" type="text" maxlength=16 name="Input" style="width:98%" /></td>
</tr>
<tr>
<td style="width: 40px">
<input id="Button1" type="button" value="1" onclick="addvalue('1')" /></td>
<td style="width: 40px">
<input id="Button2" type="button" value="2" onclick="addvalue('2')" /></td>
<td style="width: 40px">
<input id="Button3" type="button" value="3" onclick="addvalue('3')" /></td>
<td>
<input id="Button7" type="button" value="+" onclick="addvalue(' + ')" /></td>
</tr>
<tr>
<td>
<input id="Button4" type="button" value="4" onclick="addvalue('4')" /></td>
<td>
<input id="Button5" type="button" value="5" onclick="addvalue('5')" /></td>
<td>
<input id="Button6" type="button" value="6" onclick="addvalue('6')" /></td>
<td>
<input id="Button8" type="button" value="-" onclick="addvalue(' - ')" /></td>
</tr>
<tr>
<td>
<input id="Button9" type="button" value="7" onclick="addvalue('7')" /></td>
<td>
<input id="Button10" type="button" value="8" onclick="addvalue('8')" /></td>
<td>
<input id="Button11" type="button" value="9" onclick="addvalue('9')" /></td>
<td>
<input id="Button12" type="button" value="*" onclick="addvalue('*')" /></td>
</tr>
<tr>
<td>
<input id="Button13" type="button" value="C" onclick="Calc.Input.value=null" /></td>
<td>
<input id="Button14" type="button" value="0" onclick="addvalue('0')" /></td>
<td>
<input id="Button15" type="button" value="=" onclick="Calc.Input.value = eval(Calc.Input.value)" /></td>
<td>
<input id="Button16" type="button" value="/" onclick="addvalue(' / ')" /></td>
</tr>
</table>
<script type="text/javascript">
function addvalue(arg1) {
Calc.Input.value += arg1;
}
</script>
</asp:Content>
I hope that helps