Noob needs basic help on Javascript 'spreadsheet'

The Natural Philosopher · Jul 4, 2007

I am no stranger to procedural languages (C mainly), but am to object
style languages.. and in particular the overall way that javascript
hangs together.

What I wish to do, is to create a sort of spreadsheet type web page,
customized towards a particular application, so that non technical users
can select from (dynamically variable) drop down menus, and set up a
simulation, and the end results are automatically updated in various
output places.

What puzzles me is how the browser/script interface works.

i.e. if I have a bunch of global variables that represent calculation
results, and I update these as options are selected, will the visible
results of these variables instantly update if I use e.g. a javascript
function to express them as HTML text, or do I have to physically force
some kind of refresh on the page by doing a submit type action?

i.e. is it enough to say have a variable written to screen via a write
command, and then that will update as and when the document variable
changes?

As might happen after a select event..

Lee · Jul 4, 2007

The Natural Philosopher said:

I am no stranger to procedural languages (C mainly), but am to object
style languages.. and in particular the overall way that javascript
hangs together.

Your confusion doesn't seem to be about Object Oriented languages
as much as it is about event-driven environments such as a browser.

i.e. is it enough to say have a variable written to screen via a write
command, and then that will update as and when the document variable
changes?

As might happen after a select event..

Changing the variable won't update the display. You need to either
write the change to the document (usually a bad idea, since writing
to an existing document clears all previous content), or you change
the innerHTML attribute of a DOM object (or other ways, that don't
really apply in this case).

Here's a fairly simple example that seems relevant:

<html>
<head>
<title>Demo</title>
<script type="text/javascript">
function calcAcc() {
if (document.ui.force.selectedIndex && document.ui.mass.selectedIndex) {
var f=document.ui.force.options[document.ui.force.selectedIndex].text;
var m=document.ui.mass.options[document.ui.mass.selectedIndex].text;
document.ui.force.selectedIndex=0;
document.ui.mass.selectedIndex=0;
var a=f/m;
document.getElementById("forceTD").innerHTML=f;
document.getElementById("massTD").innerHTML=m;
document.getElementById("accelTD").innerHTML="<b>"+a+"</b>";
}
}
</script>
<style type="text/css">
TD {width:12em;
text-align:center;
padding:1em;
}
</style>

</head>
<body>
<form name="ui">
<select name="force" onchange="calcAcc()">
<option selected>Force...</option>
<option>6</option>
<option>12</option>
<option>18</option>
<option>24</option>
</select>
<select name="mass" onchange="calcAcc()">
<option selected>Mass...</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
<table border>
<tr><th>Force</th><th>Mass</th><th>Acceleration</th></tr>
<tr>
<td id="forceTD"> </td>
<td id="massTD"> </td>
<td id="accelTD"> </td>
</tr>
</table>
</body>
</html>

--

The Natural Philosopher · Jul 4, 2007

Lee said:
The Natural Philosopher said:

Your confusion doesn't seem to be about Object Oriented languages
as much as it is about event-driven environments such as a browser.

Yes..been struggling away here..what you say is fairly true. ;-)

Can't quite see what gets run when the page loads, what gets run when
the onchange function is called, and how to communicate between the two.
I've laready discovered that I can't pass a variable explicitly in
onchange(), except 'this'....

Changing the variable won't update the display. You need to either
write the change to the document (usually a bad idea, since writing
to an existing document clears all previous content), or you change
the innerHTML attribute of a DOM object (or other ways, that don't
really apply in this case).

Not that I undersnatd that last phrase..never mind. It gives me keywords
to google on..and I thank you for that at least.;-)

Here's a fairly simple example that seems relevant:

<html>
<head>
<title>Demo</title>
<script type="text/javascript">
function calcAcc() {
if (document.ui.force.selectedIndex && document.ui.mass.selectedIndex) {
var f=document.ui.force.options[document.ui.force.selectedIndex].text;
var m=document.ui.mass.options[document.ui.mass.selectedIndex].text;
document.ui.force.selectedIndex=0;
document.ui.mass.selectedIndex=0;
var a=f/m;
document.getElementById("forceTD").innerHTML=f;
document.getElementById("massTD").innerHTML=m;
document.getElementById("accelTD").innerHTML="<b>"+a+"</b>";
}
}
</script>
<style type="text/css">
TD {width:12em;
text-align:center;
padding:1em;
}
</style>

</head>
<body>
<form name="ui">
<select name="force" onchange="calcAcc()">
<option selected>Force...</option>
<option>6</option>
<option>12</option>
<option>18</option>
<option>24</option>
</select>
<select name="mass" onchange="calcAcc()">
<option selected>Mass...</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
<table border>
<tr><th>Force</th><th>Mass</th><th>Acceleration</th></tr>
<tr>
<td id="forceTD"> </td>
<td id="massTD"> </td>
<td id="accelTD"> </td>
</tr>
</table>
</body>
</html>

Right. You've demonstrated some stuff there that I simply didn't
know..like the association between the form or selection name , and a
subclass of 'document'.and the use of getElementbyID(). God what a
hacked up way of doing things...

However if it does the biznai, I'll follow your lead

It looks like a massive onchange="Update_sodding_everything()" plus a
relentless trawl through all selections and updating the table (or other
id'd elements' is whats needed..mm,. and drop down dynamically
changeable menus too..like imperial/metric etc etc..haha.

Thanks. I'll mess around with this lot and see where I get to.

Need help with code on website (noob)	2	Jul 18, 2022
Noob question about mathematical addition vs. "string addition" in C#	1	Mar 6, 2022
How to go about building a crud app when you are a noob	1	Jan 2, 2023
Very Basic CC Validation Javascript	0	Oct 29, 2019
Javascript dummy needs help.	0	Jan 8, 2010
Mandatory Elements To Conduct JavaScript Form Manipulation	7	Aug 22, 2023
Correct javascript generates problems	1	Dec 31, 2022
I need help in understanding these files on my phone, Could someone help me understand these files? Urgent help needed. Please help.	1	Jun 4, 2023

Noob needs basic help on Javascript 'spreadsheet'

The Natural Philosopher

Lee

The Natural Philosopher

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads