HTML Goodies: Script Tip: Week 47

 

Take a Tip…

Okay, let’s do some math! We have the image’s height, width, and will soon have a new height from the user. Here’s the script and its effect once again.

---

When the prompt appears, put in “angel.jpg”
(without the quotes)!

See it in Action

---

Last week we looked at the first table. We’re going to stick with that for now. The second table works the same way.

The first table has a button that fires a function named newW(). It looks like this:

function newW()

{
a = high;
b = wide;
c = document.calc.h2.value;
d = (b*c)/a;
document.calc.width2.value = Math.round(d)
}

To make the math equation that will figure the new width a little easier, “a” is assigned to the image’s current height, which is represented by “high.” Then “b” is assigned to the current width, represented by “wide.”

Next, the new height value entered by the user, document.calc.h2.value (the text box), is assigned the variable “c.”

The calculation for the new width is (b*c)/a. The result of that equation is assigned the variable “d.”

Now we need to display it in the text box document.calc.width2.value. However, very seldom do numbers calculate perfectly, so we need to take “d” and round it off. We do that using Math.round(d).

Now we have the new width displaying in the text box. But what of the second table and figuring the new height? The function is very similar, except for where user input comes from and the equation. It is called newH() and it looks like this:

function newH()

{
a = high;
b = wide;
e = document.calc.wb2.value;
f = (a*e)/b;
document.calc.height2.value = Math.round(f)
}

Now the information from the viewer is coming from a text box called “wb2.” If you look at the code for the second table, you’ll see that text box. The calculation for the new height is (a*e)/b and that value is sent to a text box named “height2.” Again, look at the second table code and you’ll see it.

Since we’re dealing with new numbers here, we need to assign new variable names to the new height and width. Notice that “e” equals the new width and “f” equals the new result. Notice also that I changed the variable names in the equation. You have to make these changes or both equations will use the same numbers. Not good.

So far, we’ve grabbed the image’s current height and width and, using that information plus one value from the user, we’ve created a new height or new width. That’s pretty good, but it’s better if we can then take those values and show the user what the image will look like. We’ll do that next week.

Next Week: Let Me See It!

Do YOU have a Script Tip you’d like to share? How about suggesting a Script Tip to write about? I’d love to hear it. Write me at: webmaster@htmlgoodies.com.

---

Learn to write your own JavaScripts with the