View Full Version : use generated JS variable in HTML table dimensions

09-30-2003, 12:54 PM
I would like to set a cell width within a table to a percentage.

As an example of how I'm generating the figure I want to use:

var barperc=Math.round(100*(22/30))

This 'returns' a value of 76.

Now the question.
How do I use that in HTML to set the width ? <td width="?????%">

Or how do I reference it. I don't understand the terminology in tutorials where it says "this returns a value of 76..." If it does, where has it returned it to ?

Thanks in advance for any help you can give me.

I searched for help on this first, but even with a detailed search it gave me over 1000 posts and after reading the first 100 I hadn't found anything.

09-30-2003, 02:23 PM
Well, the word "return" is used to describe whatever outcome you have from a JavaScript expression. You see, a function takes input in the form of arguments, processes those arguments or variables otherwise available to it, possibly gives cause to side effects, and sends a return value to the caller. Some examples:

alert('text') // This function (alert) takes the input (the argument 'text'), gives cause to a side effect (an alert box containing the argument sent to it) and returns without a value.

var t=parseInt('11',16) // This function (parseInt) takes the input (arguments '11' and 16), causes no side effects, and returns the value 17, which is stored in the variable t.

var t=17; // This is equivalent to the last statement. since the return value can be said to 'replace' the function in the context it's put in.

That's as good as I can explain what a return value is without getting deeper into the way custom functions work in JavaScript.

As for getting the value into the html, you must do this from JavaScript. Thus, you can either use the DOM to change the value, use the DOM to set the CSS, or write the tag from the script. Writing the tag from the script needs to be done while the page is loading, while the DOM needs the document to be already loaded.

09-30-2003, 02:32 PM
Thanks for the response liorean.

I used a document.write to test to see if it had done the equation, which it had.
I'm not too bothered about the 'return' side of it, just that I want to know how I can access it to use it within the HTML.

Leaving DOM aside (that's something I need to read up on within this site) I see that you said I could use CSS.

What do I need to write for that ? And would that be within the <style> tags ?

Would the table cell then be written as <td width="{barperc}%"> ?

09-30-2003, 02:37 PM
No, but you can do like this:

<td id="yourcell">

and then in the script:
document.getElementById('yourcell').style.width=widthvariable+'%'; // set the width style

However, then you might as well set the width like this:

document.getElementById('yourcell').width=widthvariable+'%'; // set the width attribute

09-30-2003, 03:01 PM
Thanks, I've tried it both ways, but I'm not placing the code in the right place I'm sure of it. I don't know the heirachy of what comes first and where.

"and then in the script", which script ? and where in whatever script ?.

Does either of the two lines go in the same script as the var barperc line I wrote.

This is what I tried:

var widthvariable=Math.round(100*(22/30))
document.getElementById('yourcell').width=widthvariable+'%'; // set the width attribute

09-30-2003, 03:07 PM
Well, you need to place the script either after the td in the html source, in the onload attribute od the body tag, or wrap it like this:

var widthvariable=Math.round(100*(22/30))
document.getElementById('yourcell').width=widthvariable+'%'; // set the width attribute

09-30-2003, 03:43 PM
I knew you'd know where I was coming from, and I don't even know that !

It works perfectly.

Thank you very much indeed.

09-30-2003, 03:58 PM
I'm here to help.