Why will this script not work?

**skripter** · 11-07-2007, 07:39 PM

1) Script Title:
Enlarge Text-The script is intended to enlarge the text to a certain width using a timed interval.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>[Enlarge Text]</TITLE>

</HEAD>
<BODY>

<script type="text/javascript">
i=20
function ChangeSyle(SomeTag)
{
if (i < 500) {
i=i+40

}
SomeTag.style.width = i;
SomeTag.style.fontWeight = "bold";
SomeTag.style.color = "red";
tme=setTimeout("ChangeSyle()",50)
}

</script>

<p onclick="ChangeSyle(this);">Style this paragraph in 14pt bold red text.</p>

</BODY>
</HTML>

3) Describe problem: This script keeps popping out error message saying that the keyword 'style' is null or not an object. What can be done to amend the script to correct this problem? If I remove the set Timeout timed interval, then the script will work, enlarging the text width through several manual clicking. My intention is to click on the paragraph just once and let the timer increase the text width.

Many thanks,

**Twey** · 11-07-2007, 08:11 PM

Your script is broken in many ways.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

The latest version of HTML is 4.01, and the "transitional" phase was over a good decade ago.

i=20

This doesn't need to be global.

function ChangeSyle(SomeTag)

Javascript convention is that variables and functions start with a lower-case letter, unless they're constructor functions or namespacing objects.

SomeTag.style.width = i;

i what? Centimetres? Inches? Pixels? Ems? How long does it take me to walk to the butchers if I walk at twelve and the butchers' is three away?

tme=setTimeout("ChangeSyle()",50)

Passing strings to setTimeout() is ugly and inefficient. Also, you don't pass the SomeTag parameter that you later use in the function. This is the cause of your error.

Style this paragraph in 14pt bold red text.

Points are an absolute measurement (1/72th of an inch) and so do not scale well on differently-sized displays. You should use a relative measurement, such as percentages.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Enlarge Text</title>
    <script type="text/javascript">
      function defaultArgs(opts, defaults) {
        opts = opts || {};
        defaults = defaults || {};

        for(var x in opts)
          if(typeof opts[x] === "undefined")
            opts[x] = defaults[x];
        return opts;
      }

      function growElement(element, opts) {
        opts = defaultArgs(opts, {
          start: 0,
          stop: 100,
          step: 5,
          units: "em"
        });

        var c = opts.start,
          s = element.style,
          p = function() {
            if(c >= opts.stop) {
              clearInterval(t);
              s = null;
            } else {
              s.width = c + opts.units;
              c += opts.step;
            }
          },
          t = setInterval(p, 50);

          element = null;
      }

      function changeStyle(el) {
        var s = el.style;
        s.fontSize = "150%";
        s.fontWeight = "bold";
        s.color = "red";
        growElement(el);
      }
    </script>
  </head>
  <body>
    <p onclick="changeStyle(this);">Style this paragraph in 150% bold red text.</p>
  </body>
</html>

Untested.

**skripter** · 11-07-2007, 11:45 PM

Thank you Twey for your time to respond and help. It is sincerely appreciated.

I do not understand what the functions of your corrected version means, but when I tried your script on my web editor, it did work,but an error message appeared at the end stating that line 31 char 15 is an invalid argument.

This is line 31: s.width = c + opts.units;

**Twey** · 11-08-2007, 01:27 AM

May I see a demo page?

**skripter** · 11-08-2007, 04:43 PM

Yes, certainly. I take it you want a demo of the error message? I am not sure what you mean by demo but I am inserting a screen shot of the error message I got at the end of running your script.

It would have been much easier if one can copy and paste images instead of using URl's.

**skripter** · 11-08-2007, 04:47 PM

Here is a resend of the URL showing the error message. For some reason the first one didn't show it.

**skripter** · 11-08-2007, 04:56 PM

Yes, certainly. I take it you want a demo of the error message? I am not sure what you mean by demo but I am inserting a screen shot of the error message I got at the end of running your script.

Okay! The first 2 attempts weren't successful so I am going to paste the URL of the demo you requested directly on this box, instead of using the prompt box you supplied.

http://members.aol.com/AlphaOmacron/ErrorMessage.htm

**boogyman** · 11-08-2007, 05:02 PM

the image is still now showing up...

if this ss file is on your desktop use the "manage attachments" button below in the full (advanced) posting screen. otherwise copy and paste the url of the demo page if it is live on the web so we can look at it there

**Twey** · 11-08-2007, 05:13 PM

No, I wanted to see the actual page that caused the error.

**skripter** · 11-08-2007, 07:05 PM

here is the demo page of your script:

http://members.aol.com/DJosepa2z/Demo+Page.htm

On the editor I keep getting the error messages but on the page the error message does not appear.

Thread: Why will this script not work?

Thread Tools

Search Thread

Why will this script not work?

Thanks

Second send of Demo of Error Message

Bookmarks

Bookmarks

Posting Permissions