Home     |     .Net Programming    |     cSharp Home    |     Sql Server Home    |     Javascript / Client Side Development     |     Ajax Programming

Ruby on Rails Development     |     Perl Programming     |     C Programming Language     |     C++ Programming     |     IT Jobs

Python Programming Language     |     Laptop Suggestions?    |     TCL Scripting     |     Fortran Programming     |     Scheme Programming Language


 
 
Cervo Technologies
The Right Source to Outsource

MS Dynamics CRM 3.0

Javascript / Client Side Development

javascript error on div


I have the following code in my html file. Somehow the "retry" div is
always displaying and it has "addr has no properties" js error. What I
want is: NOT display "retry" div and only display after clicks "the
URL" link. Anything is wrong in the code?

--------------------------------------------------------------------------- ---------------------------------------------------
<script type="text/javascript"><!--
    function toggleRetry(val) {
      var addr = document.getElementById('retry')
      if (val) {
        addr.style.display='';
      } else {
        addr.style.display='none';
      }
    }
//--> </script>

<script>toggleRetry(true)</script>
<h3 style="margin-bottom:0px;margin-top:0px;">Test<a href="#"
onclick="toggleRetry(true)">the URL</a>.</h3>

<div id="retry" style="display:block">
<table>
<tr>
<td>Display Retry</td>
</tr>
</table>
</div>

On 19 May 2007 08:56:02 -0700, in comp.lang.javascript
"u@yahoo.com" <u@yahoo.com>

This line is executing before the page has been completely loaded.

>| <h3 style="margin-bottom:0px;margin-top:0px;">Test<a href="#"
>| onclick="toggleRetry(true)">the URL</a>.</h3>
>|
>| <div id="retry" style="display:block">
>| <table>
>| <tr>
>| <td>Display Retry</td>
>| </tr>
>| </table>
>| </div>

Try:
<body onload="toggleRetry(true);">
---- then the rest of your code without the offending line.
---------------------------------------------------------------
jnort@yourpantsyahoo.com.au  : Remove your pants to reply
---------------------------------------------------------------
Sorry, the code snippet should be:

 <script type="text/javascript"><!--
    function toggleRetry(val) {
      var addr = document.getElementById('retry')
      if (val) {
        addr.style.display='';
      } else {
        addr.style.display='none';
      }
    }
//--> </script>

<script>toggleRetry(true)</script>
<h3 style="margin-bottom:0px;margin-top:0px;">Test<a href="#"
onclick="toggleRetry(false)">the URL</a>.</h3>

<div id="retry" style="display:block">
<table>
<tr>
<td>Display Retry</td>
</tr>
</table>
</div>

So if I do <body onload="toggleRetry(false);">, the "retry" div won't
be displayed when the page is loaded. (Good!) But when I click "the
URL", the "retry" div still won't be displayed and it has "add has no
properties" js error.

On May 19, 9:38 am, Jeff North <jnort@yahoo.com.au> wrote:

Sorry, the code snippet should be:

 <script type="text/javascript"><!--
    function toggleRetry(val) {
      var addr = document.getElementById('retry')
      if (val) {
        addr.style.display='';
      } else {
        addr.style.display='none';
      }
    }
//--> </script>

<script>toggleRetry(true)</script>
<h3 style="margin-bottom:0px;margin-top:0px;">Test<a href="#"
onclick="toggleRetry(false)">the URL</a>.</h3>

<div id="retry" style="display:block">
<table>
<tr>
<td>Display Retry</td>
</tr>
</table>
</div>

So if I do <body onload="toggleRetry(false);">, the "retry" div won't
be displayed when the page is loaded. (Good!) But when I click "the
URL", the "retry" div still won't be displayed and it has "add has no
properties" js error.

On May 19, 9:38 am, Jeff North <jnort@yahoo.com.au> wrote:

u@yahoo.com said:

>Sorry, the code snippet should be:

> <script type="text/javascript"><!--
>    function toggleRetry(val) {
>      var addr = document.getElementById('retry')
>      if (val) {
>        addr.style.display='';
>      } else {
>        addr.style.display='none';
>      }
>    }
>//--> </script>

This bit of code:

  <a href="#" onclick="toggleRetry(false)">the URL</a>.

tells the browser to execute your function and then, after
that onclick handler has finished, to load "#", which means
to reload the page and scroll to the top.

If you don't want to reload the page, your onclick handler
should return false.

  onclick="toggleRetry(false);return false"

The "<!--" "//-->" comments serve no purpose, by the way.
You're not likely to come across any browsers that don't
know what the <script> tag means.

--

On May 19, 2:35 pm, Lee <REM0VElbspamt@cox.net> wrote:

Hm...it is not working. I added <body onload="toggleRetry(false);">
but I got "addr has no properties" right after loading the page. And
with onclick="toggleRetry(false);return false", after clicking the
link, it still won't display the div...
u@yahoo.com wrote on 20 mei 2007 in comp.lang.javascript:

> On May 19, 2:35 pm, Lee <REM0VElbspamt@cox.net> wrote:
>> u@yahoo.com said:

>> >Sorry, the code snippet should be:

>> > <script type="text/javascript"><!--
>> >    function toggleRetry(val) {
>> >      var addr = document.getElementById('retry')
>> >      if (val) {
>> >        addr.style.display='';

addr.style.display='block';

is more logical since you had set the default style as:

>>>> <div id="retry" style="display:block">

but why not set the style to:

<div id="retry" style="display:none;">

and there should be no need for the onload in:

>>>> <body onload="toggleRetry(false);">
>> >      } else {
>> >        addr.style.display='none';
>> >      }
>> >    }

A short version:

function toggleRetry(val) {
  document.getElementById('retry').style.display =
    (val) ?'block' :'none';

Show the error line.

> And
> with onclick="toggleRetry(false);return false", after clicking the
> link, it still won't display the div...

Logical, my dear Watson, it should be:

onclick='toggleRetry(true);return false'

Why not try an even shorter version:

=====================================
<script type="text/javascript">
 function toggleRetryOn() {
   document.getElementById('retry').style.display =
    'block';
 }
</script>

<a href="#"
onclick="toggleRetryOn();return false;">Click me</a>

<div id='retry' style='display:none;'>
Display Retry
</div>
======================================

Finally using an anchor/link <a></a> to execute a code function seems
illogical, as you would have to think about
the resulting page reloading if js is not available.

Use a button:

<button
onclick='toggleRetryOn();return false;'>
Click me</button>

Or a css pseudo-anchor:

<span
onclick = 'toggleRetryOn();return false;'
style = 'cursor:pointer;color:navy;text-decoration:underline;'
onmouseover = 'this.style.color="red";'
onmouseout = 'this.style.color="navy";'

>Click me</span>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
I wrote on 20 mei 2007 in comp.lang.javascript:

> Use a button:

> <button
> onclick='toggleRetryOn();return false;'>

onclick='toggleRetryOn();'>

> Click me</button>

> Or a css pseudo-anchor:

> <span
> onclick = 'toggleRetryOn();return false;'

onclick='toggleRetryOn();'>

> style = 'cursor:pointer;color:navy;text-decoration:underline;'
> onmouseover = 'this.style.color="red";'
> onmouseout = 'this.style.color="navy";'
>>Click me</span>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
On May 19, 11:56 am, "u@yahoo.com" <u@yahoo.com> wrote:

The third line of your code is missing the terminating semicolon. So
the declaration of the object variable, addr, is ignored and explains
why it has no properties.
On May 20, 10:41 am, Herbert Blenner <a1ea@aol.com> wrote:

I've put my code with your suggestions into a html file:
<html>
<head>
 <script type="text/javascript"><!--
    function toggleRetry(val) {
      var addr = document.getElementById('retry');
      if (val) {
        addr.style.display='block';
      } else {
        addr.style.display='none';
      }
    }
//--> </script>
<body">

<script>toggleRetry(false)</script>
<h3 style="margin-bottom:0px;margin-top:0px;">Test<a href="#"
onclick="toggleRetry(true);return false">the URL</a>.</h3>

<div id="retry" style="display:block">
<table>
<tr>
<td>Display Retry</td>
</tr>
</table>
</div>
</body>
</head>
</html>

I got a "addr has no properties" right after loading the page. I think
<script>toggleRetry(false)</script> and
onclick="toggleRetry(true);return false" both are failing because "var
addr = document.getElementById('retry');" is failing. Any idea why?

On May 20, 2:59 pm, "u@yahoo.com" <u@yahoo.com> wrote:

Try changing <body"> to <body>. If that does not work then use alert()
to troubleshot the code. I would begin by placing alert(addr) right
after the declaration statement.

Go luck.

On May 20, 1:40 pm, Herbert Blenner <a1ea@aol.com> wrote:

Thanks. I set the alert(addr) right after the declaration statement
and it is always returning null on "<script>toggleRetry(false)</
script>". But "onclick="toggleRetry(true);return false" works fine
though and addr has the right value. I am using Firefox and IE so they
should know what <script> means...
On May 20, 2:59 pm, "u@yahoo.com" <u@yahoo.com> wrote:

I would try var addr = document.getElementById("retry");
provided addr is only referenced in the current function. If you use
addr elsewhere then declare var addr as a global object.

Herbert

Add to del.icio.us | Digg this | Stumble it | Powered by Megasolutions Inc