Javascript Variable value being deleted? (Probably not, but it seems like it) - javascript

I am trying to make a simple dieting calculator with my limited HTML, CSS, and JS knowledge. While I was partway through coding the Javascript (the third step for the user out of five), my third variable was returning as 0, when it should return as something else (~10-15) My logic works like this:
A user clicks a button from a group that specifies to them.
For the first function, st1 = (a number that specifies on which button is pressed)
Do note that at the start of the js, the variables are already declared (let st1 = 0; let st2 = 0; etc.)
For the second function, st2 = parseInt(st1) + (another number)
The same thing happens for the 3rd function
I have not finished the rest
I have tried console.log()ing st2 when the third step is called, and it returns as 0. Thanks for any help!
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="script.js"></script>
<table>
<tr>
<td>
<p id="step1">Step 1.</p>
</td>
<td>
Gender:
</td>
<td>
<table>
<tr>
<td>
<button onclick="Male()">Male</button>
</td>
</tr>
<tr>
<td>
<button onclick="Female()">Female</button>
</td>
</tr>
<tr>
<td>
<button onclick="Other()">Other/Prefer Not to say</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<p id="step2">Step 2.</p>
</td>
<td>
Age:
</td>
<td>
<table>
<tr>
<td>
<button onclick="seventeen()">Between 17-26</button>
</td>
</tr>
<tr>
<td>
<button onclick="twentyseven()">Between 27-37</button>
</td>
</tr>
<tr>
<td>
<button onclick="thirtyeight()">Between 38-47</button>
</td>
</tr>
<tr>
<td>
<button onclick="fortyeight()">Between 48-57</button>
</td>
</tr>
<tr>
<td>
<button onclick="fiftyeight()">Over 58</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<p id="step3">Step 3.</p>
</td>
<td>
Height
</td>
<td>
<table>
<tr>
<td>
<button onclick="under5()">Below 5ft</button>
</td>
</tr>
<tr>
<td>
<button onclick="btwn()">Between 5'0" - 5'9"</button>
</td>
</tr>
<tr>
<td>
<button onclick="over()">Over 5'10"</button>
</td>
</tr>
</table>
</td>
</tr>
</body>
</html>
And here is the JS:
let st1 = 0;
let st2 = 0;
let st3 = 0;
//Start Group one, these three functions are each called when clicking a button with the user's gender
function Male() {
st1 = 8;
document.getElementById("step1").innerHTML = "Complete";
console.log(st1);
}
function Female() {
st1 = 2;
document.getElementById("step1").innerHTML = "Complete";
console.log(st1);
}
function Other() {
st1 = 4;
document.getElementById("step1").innerHTML = "Complete";
console.log(st1);
}
//End Group one
//Start group two, each of these are called when the user clicks a button with their age group.
function seventeen() {
let st2 = parseInt(st1) + 4;
document.getElementById("step2").innerHTML = "Complete";
console.log(st2)
}
function twentyseven() {
let st2 = parseInt(st1) + 3;
document.getElementById("step2").innerHTML = "Complete";
console.log(st2);
}
function thirtyeight() {
let st2 = parseInt(st1) + 2;
document.getElementById("step2").innerHTML = "Complete"
console.log(st2);
}
function fortyeight() {
let st2 = parseInt(st1) + 1;
document.getElementById("step2").innerHTML = "Complete"
console.log(st2);
}
function fiftyeight() {
let st2 = parseInt(st1) + 0;
document.getElementById("step2").innerHTML = "Complete"
console.log(st2)
}
//End group 2
//Start Group 3, The user clicks a button with their height range.
function under5() {
let st3 = st2 + 0;
document.getElementById("step3").innerHTML = "Complete";
console.log(st3);
}
function btwn() {
let st3 = parseInt(st2) + 1;
document.getElementById("step3").innerHTML = "Complete";
console.log(st3);
}
function over() {
let st3 = parseInt(st2) + 2 ;
document.getElementById("step3").innerHTML = "Complete";
console.log(st3);
}
//End group 3
//There are two more groups I haven't finished coding, so won't include here.


when you put the keyword let before the variable, it gets redeclared. try removing the lets from the functions.
also, you could do something like this, though there are even better ways...
<button onclick="gender(8)">Male</button>
<button onclick="gender(2)">Female</button>
function gender( value ) {
std1 = value;
}

Related

How do I change the value of a variable in a table?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--Variables with Player Data-->
<script type="text/javascript">
//Player A
let PlayerAMS = 0
let PlayerATN = 0
// Player B
let PlayerBMS = 0
let PlayerBTN = 0
//Player C
let PlayerCMS = 0
let PlayerCTN = 0
//Player D
let PlayerDMS = 0
let PlayerDTN = 0
//Player E
let PlayerEMS = 0
let PlayerETN = 0
//Player F
let PlayerFMS = 0
let PlayerFTN = 0
//Player G
let PlayerGMS = 0
let PlayerGTN = 0
//Player H
let PlayerHMS = 0
let PlayerHTN = 0
//Player I
let PlayerIMS = 0
let PlayerITN = 0
//Player J
let PlayerJMS = 0
let PlayerJTN = 0
//Player K
let PlayerKMS = 0
let PlayerKTN = 0
//Player L
let PlayerLMS = 0
let PlayerLTN = 0
//Player M
let PlayerMMS = 0
let PlayerMTN = 0
//Player N
let PlayerNMS = 0
let PlayerNTN = 0
//Player O
let PlayerOMS = 0
let PlayerOTN = 0
//Player P
let PlayerPMS = 0
let PlayerPTN = 0
//Player Q
let PlayerQMS = 0
let PlayerQTN = 0
</script>
<table id="dataTable" border="1">
<!-- Headers -->
<tr>
<th>Player Number</th>
<th>Missed Serves</th>
<th>Touched Net</th>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
</table>
<button type="button" onclick="incrementAMS()">Increment Player 1 MS</button>
<button type="button" onclick="DecrementAMS()">Decrement Player 1 MS</button>
<button class="button" onclick="update()">Update</button>
<script type="text/javascript">
let array = [[PlayerAMS, PlayerATN],
[PlayerBMS, PlayerBTN],
[PlayerCMS, PlayerCTN],
[PlayerDMS, PlayerDTN],
[PlayerEMS, PlayerETN],
[PlayerFMS, PlayerFTN],
[PlayerGMS, PlayerGTN],
[PlayerHMS, PlayerHTN],
[PlayerIMS, PlayerITN],
[PlayerJMS, PlayerJTN],
[PlayerKMS, PlayerKTN],
[PlayerLMS, PlayerLTN],
[PlayerMMS, PlayerMTN],
[PlayerNMS, PlayerNTN],
[PlayerOMS, PlayerOTN],
[PlayerPMS, PlayerPTN],
[PlayerQMS, PlayerQTN],
]
console.log(array)
table = document.getElementById("dataTable");
function update() {
// rows
for (let i = 1; i < table.rows.length; i++) {
// cells
for (let j = 1; j < table.rows[i].cells.length; j++) {
table.rows[i].cells[j].innerHTML = array[i][j - 1];
}
}
}
function incrementAMS(){
PlayerAMS++;
console.log(PlayerAMS);
}
function incrementATN(){
PlayerATN++;
console.log(PlayerATN);
}
function DecrementAMS(){
PlayerAMS--;
console.log(PlayerAMS);
}
function DecrementATN(){
PlayerATN--;
console.log(PlayerATN);
}
</script>
</body>
</html>
I am making a table where I can just press a button and a specific value inside a cell increases. And the function I have does do that, as evidenced by the value increasing when I check it in the console. However, I can't make it show up in the table, and the value in the cell just stays at 0. How can I make it so the value increases in real time, or after I hit the update button?

Array starts at zero.
table.rows[i].cells[j].innerHTML = array[i-1][j - 1];
You're updating the PlayerAMS but the array value is being used for display. You can just change the index to update other players. You should also change decrement functions like this.
function incrementAMS(){
array[0][0]++;
console.log(array[0][0]);
update();
}

There are (at least) 2 problems with your code.
you are updating PlayerAMS. BUT in javascript the primitive types are not assigned as references, but by value. Meaning that your array is not an array of pointers to PlayerXXX, but an array of values copied at the time of creation. So you need to update array as well.
Your indexing is wrong for array (i)
I've modified your update function a bit using your own code style to get the functionality you probably want to get. However, I have to say that it is far from ideal at the moment. Keep working on it :)
function update() {
array = [[PlayerAMS, PlayerATN],
[PlayerBMS, PlayerBTN],
[PlayerCMS, PlayerCTN],
[PlayerDMS, PlayerDTN],
[PlayerEMS, PlayerETN],
[PlayerFMS, PlayerFTN],
[PlayerGMS, PlayerGTN],
[PlayerHMS, PlayerHTN],
[PlayerIMS, PlayerITN],
[PlayerJMS, PlayerJTN],
[PlayerKMS, PlayerKTN],
[PlayerLMS, PlayerLTN],
[PlayerMMS, PlayerMTN],
[PlayerNMS, PlayerNTN],
[PlayerOMS, PlayerOTN],
[PlayerPMS, PlayerPTN],
[PlayerQMS, PlayerQTN],
]
// rows
for (let i = 1; i < table.rows.length; i++) {
// cells
for (let j = 1; j < table.rows[i].cells.length; j++) {
table.rows[i].cells[j].innerHTML = array[i-1][j - 1];
}
}
}

How do I get and pass the field of the row having class="name" in the following html?

<tbody>
<tr>
<td>gibberish</td>
<td class="name" hidden>200398</td>
<td>iPhone X 64Gb Grey</td>
<td>$999.00</td>
<td>1</td>
<td>
<button onclick="fetchdata(parameter)">Fetch Details</button>
</td>
</tr>
</tbody>
In the above html, I want that the function fetchdata('parameter') to contain the text content of the td which has a class of name and is hidden, as the parameter.
OR
I need a way in which I can get the text content of the td having class of name in my javascript function.
i.e.
function fetchdata() {
const name = document.somethingThatGivesMeName()
}
NOTE: There are going to be multiple rows that I may require to get the name of so I can't directly do document.queryselector('.name')
Sorry, This might be pretty simple but I can't quite figure it out.

When clicking the button find the first row up in the tree relative to the button with the closest method. Then from the row select the element with the class name and read the textContent or innerText of that element.
const buttons = document.querySelectorAll('.js-fetch-details');
function fetchDetails(event) {
const row = event.target.closest('tr');
const name = row.querySelector('.name').textContent;
console.log(name);
}
buttons.forEach(button => button.addEventListener('click', fetchDetails));
<table>
<tbody>
<tr>
<td>gibberish</td>
<td class="name" hidden>200398</td>
<td>iPhone X 64Gb Grey</td>
<td>$999.00</td>
<td>1</td>
<td>
<button class="js-fetch-details">Fetch Details</button>
</td>
</tr>
</tbody>
</table>

You just need the quotes ':
function fetchdata(value){
console.log(value)
}
<tbody>
<tr>
<td>gibberish</td>
<td class="name" hidden>200398</td>
<td>iPhone X 64Gb Grey</td>
<td>$999.00</td>
<td>1</td>
<td>
<button onclick="fetchdata('parameter')">Fetch Details</button>
</td>
</tr>
</tbody>
or you can use event listener and data value:
document.querySelectorAll('button').forEach(el => {
el.addEventListener('click', e => {
e = e || window.event;
e = e.target || e.srcElement;
console.log(e.dataset.value)
})
})
<tbody>
<tr>
<td>gibberish</td>
<td class="name" hidden>200398</td>
<td>iPhone X 64Gb Grey</td>
<td>$999.00</td>
<td>1</td>
<td>
<button data-value="parameter">Fetch Details</button>
</td>
</tr>
</tbody>

You can use document.getElementsByClassName('name')
This will get all the elements that have class of name.

I would put the listener on the <tbody> instead.
document.querySelector('tbody').addEventListener('click', (e) => {
// Clicking on the whole row
if (e.target.nodeName === 'TR') {
const name = e.target.querySelector('.name').textContent;
console.log(name);
}
// Clicking on the button
// Give the button a class
if (e.target.classList.contains('.somebuttonclass')) {
const name = e.target.parentNode.parentNode.querySelector('.name').textContent;
console.log(name);
}
});
UPDATE
closest would also work
document.querySelector('tbody').addEventListener('click', (e) => {
// Clicking on the whole row
if (e.target.nodeName === 'TR') {
const name = e.target.querySelector('.name').textContent;
console.log(name);
}
// Clicking on the button
// Give the button a class
if (e.target.classList.contains('.somebuttonclass')) {
const name = e.target.closest('tr').querySelector('.name').textContent;
console.log(name);
}
});

First you get all elements with class="name", then you pick just (the first) one with the attribute "hidden".
It's a way to do it anyway.
function fetchdata() {
const tds = document.getElementsByClassName("name")
for(let i = 0; i < tds.length; i++){
if(tds[i].getAttribute("hidden") != null) {
console.log(tds[i].innerHTML)
}
}
}
<table>
<tr>
<td class="name">gibberish</td>
<td class="name" hidden>200398</td>
<td>iPhone X 64Gb Grey</td>
<td>$999.00</td>
<td class="name">1</td>
<td>
<button onclick="fetchdata()">Fetch Details</button>
</td>
</tr>
</table>
With jQuery you can just do:
function fetchdata() {
console.log($('.name[hidden]').html());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>gibberish</td>
<td class="name" hidden>200398</td>
<td>iPhone X 64Gb Grey</td>
<td>$999.00</td>
<td>1</td>
<td>
<button onclick="fetchdata()">Fetch Details</button>
</td>
</tr>
</table>
Note that you need to have a table around your structure for any of this to work properly. You can't have tbody, tr and td outside a table.

If you use document.getElementsByClassName you will get what you want.
However, if there will be a case where more than one instance of that class name will occur, then you need to iterate through the classes and get their values.
The following should solve your problem
<html>
<head>
<script>
function fetchdata(){
var data = document.getElementsByClassName("data");
var t = data.length;
for(i = 0; i< t; i++){
var content = data[i].innerHTML;
alert (content);
}
}
</script>
<body>
<table>
<tbody>
<tr>
<td>gibberish</td>
<td class="data" hidden>200398</td>
<td>iPhone X 64Gb Grey</td>
<td>$999.00</td>
<td>1</td>
<td>
<button onclick="fetchdata()">Fetch Details</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Basic Input/Output help for online calculator I am developing

Beginner coder here.
I am currently developing a website for calculating various equations, but I need help with user input.
On the HTML, I currently wrote up the following code.
<section>
<!--- Celsius, Fahrenheit, Kelvin -->
<table>
<tr>
<td>&#176C</td>
<td>&#176F</td>
<td>&#176K</td>
</tr>
<tr>
<td> <input type="number" id="celsius"/> </td>
<td id="fahr1"></td>
<td id="kelv1"></td>
</tr>
<tr>
<td>later</td>
<td> <input type="number" id="fahrenheit"/> </td>
<td>later</td>
</tr>
</table>
</section>
How would I go about changing the second and third row to change along with what the user inputs without having them have to press a submit button? How would I access the input that the user has given me in order to manipulate it into an output in the corresponding spot in the table?

This is what you're after I suspect :)
HTML
<section>
<!--- Celsius, Fahrenheit, Kelvin -->
<table>
<tr>
<td>&#176C</td>
<td>&#176F</td>
<td>&#176K</td>
</tr>
<tr>
<td> <input type="number" id="celsius"/> </td>
<td id="fahr1"></td>
<td id="kelv1"></td>
</tr>
<tr>
<td id="celc2">-</td>
<td> <input type="number" id="fahrenheit" /> </td>
<td id="kelv2">-</td>
</tr>
</table>
</section>
JQuery
//Hook into an event where if an input of type number changes
$('input[type=number]').change(function() {
//If the name of the input that has changed is celsius
if($(this).attr('id') == 'celsius'){
//Call a function to get the current value using $(this).val()
//Update the text inside the relevant td's by calling a function
$('#fahr1').text(celsiusToFahrenheit($(this).val()));
$('#kelv1').text(celsiusToKelvin($(this).val()));
}
//If the name of the input that has changed is fahrenheit
else if($(this).attr('id') == 'fahrenheit'){
//Call a function to get the current value using $(this).val()
//Update the text inside the relevant td's by calling a function
$('#celc2').text(fahrenheitToCelsius($(this).val()));
$('#kelv2').text(fahrenheitToKelvin($(this).val()));
}
});
function celsiusToFahrenheit(c) {
var f = parseInt(c);
f = f * (9/5) + 32;
return f;
}
function celsiusToKelvin(c) {
var k = parseInt(c);
k = k + 273.15;
return k;
}
function fahrenheitToCelsius(f) {
var c = parseInt(f);
c = (c - 32) * (5/9);
return c;
}
function fahrenheitToKelvin(f) {
var k = parseInt(f);
k = (k + 459.67) * (5/9);
return k;
}
Please note! You should put this in a <script></script> section in the top of your HTML. An example can be seen here: W3 Schools Script example
Similarly don't forget to reference JQuery in your <head></head> section. An example can be seen here: W3 Schools Reference JQuery
See it working live here: https://jsfiddle.net/cwr1hm9v/1/
EDIT
As per request, here is the Javascript equivalent
HTML
<section>
<!--- Celsius, Fahrenheit, Kelvin -->
<table>
<tr>
<td>&#176C</td>
<td>&#176F</td>
<td>&#176K</td>
</tr>
<tr>
<td> <input type="number" id="celsius"/> </td>
<td id="fahr1"></td>
<td id="kelv1"></td>
</tr>
<tr>
<td id="celc2">-</td>
<td> <input type="number" id="fahrenheit" /> </td>
<td id="kelv2">-</td>
</tr>
</table>
</section>
JavaScript
const celsius = document.getElementById('celsius');
const fahrenheit = document.getElementById('fahrenheit');
celsius.addEventListener('change', (event) => {
convertFromCelsius();
});
fahrenheit.addEventListener('change', (event) => {
convertFromFahrenheit();
});
function convertFromCelsius() {
var fahr1 = document.getElementById("fahr1");
var kelv1 = document.getElementById("kelv1");
fahr1.textContent = parseInt(celsius.value) * (9/5) + 32;
kelv1.textContent = parseInt(celsius.value) + 273.15;
}
function convertFromFahrenheit() {
var celc2 = document.getElementById("celc2");
var kelv2 = document.getElementById("kelv2");
celc2.textContent = (parseInt(fahrenheit.value) - 32) * (5/9);
kelv2.textContent = (parseInt(fahrenheit.value) + 459.67) * (5/9);
}
See it working live here: https://jsfiddle.net/0Luvq4nx/1/
Please mark this as accepted if this solves your issue.

Unable to remove rows from table

I am having the table with following data in it
<table>
<tr>
<td> cat </td>
<td> dog </td>
</tr>
<tr>
<td> hen </td>
<td> cock </td>
</tr>
</table>
I would like to delete the row based on the particular data given in table.
But I don't have any idea on how to delete the rows based on the particular data

Try this:
var table = document.querySelector('table');
var filterInput = document.querySelector('#filter');
filterInput.onkeyup = function () {
var val = this.value;
var td = table.getElementsByTagName('td');
var rows = [];
[].slice.call(td).forEach(function (el, i) {
if (el.textContent === val) {
rows.push(el);
}
});
rows.forEach(function(el) {
el.parentNode.style.display = 'none';
});
};
<input type="text" id="filter" placeholder="Hide row containing...">
<table>
<tr>
<td>cat</td>
<td>dog</td>
</tr>
<tr>
<td>hen</td>
<td>cock</td>
</tr>
</table>

Find the required element and then use style property to hide it. In the example, I went onto hide the table data element corresponding to the data dog.
var tds = $("td");
for(var i =0 ; i< tds.length ; i++)
{
var tdval = tds[i].innerHTML;
if(tdval.trim()=="dog")
{
document.getElementsByTagName("td")[i].style.display = "none";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td> cat </td>
<td> dog </td>
</tr>
<tr>
<td> hen </td>
<td> cock </td>
</tr>
</table>

How can I make a table in a cell a variable?

I have a table in a cell that displays the numbers a user enters with buttons (using onclick and a showthis function. I need to be able to store the value as a variable in order to perform operations on it. How can I do this?
PS: I am using JavaScript and HTML
<script language="JavaScript" type="text/javascript">
function showthis(first){
document.getElementById("displaycell").innerHTML+=first;
}
</script>
<body>
<h1 align="center"> RPN Calculator </h1>
<table summary align="center" border="1" cellpadding="1" cellspacing="3">
<tr>
<th id="displaycell" colspan="5" type="text"> </td>
</tr>
<tr>
<td>
<button type="button" onclick="showthis('1')">1</button>
</td>
<td>
<button type="button" onclick="showthis('2')">2</button>
</td>
<td>
<button type="button" onclick="showthis('3')">3</button>
</td>
<!-- ... -->

Firstly you should not be using += with innerHTML. It means that you will end up with the numbers appending to the cell's internal value rather than overwriting it.
function showthis ( number ) {
var cell = document.getElementById('displaycell');
cell.innerHTML = "";
cell.appendChild( document.createTextNode( number ));
}
Would be a much better way to handle that.
Next, within showthis you are best off storing the value in a variable so that you can access it directly from javascript in the future.
var displayStore = 0;
function showthis ( number ) {
var cell = document.getElementById('displaycell');
cell.innerHTML = "";
cell.appendChild( document.createTextNode( number ));
// you can either do this in a variable local to the <td> DOM Object like so
cell.currentDisplayNumber = number;
//or in a global variable like so
displayStore = number;
}
Finally, to access that variable again you can either read it out of the displaystore <td> or read it from your variable.
function DoStuff0 () {
var number = Number( document.getElementById( 'displaycell' )).innerHTML;
// rest
}
function DoStuff1 () {
var number = document.getElementById('displaycell').currentDisplayNumber;
// rest
}
function DoStuff2 () {
var number = displayStore;
// rest
}

Is this what you wanted? http://jsfiddle.net/CWQY2/
HTML:
<h1 align="center"> RPN Calculator </h1>
<table summary align="center" border="1" cellpadding="1" cellspacing="3">
<tr>
<th id="displaycell" colspan="5"> </th>
</tr>
<tr>
<td> <button type="button" onClick="showthis('1')">1</button> </td>
<td> <button type="button" onClick="showthis('2')">2</button> </td>
<td> <button type="button" onClick="showthis('3')">3</button> </td>
</tr>
</table>
JS:
function showthis(first){
document.getElementById("displaycell").innerHTML += first;
}
​
​

Categories

Resources