javascript error on div

U

usgog

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>
 
J

Jeff North

| 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>
Click to expand...

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>
Click to expand...

Try:
<body onload="toggleRetry(true);">
---- then the rest of your code without the offending line.
 
U

usgog

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.
 
U

usgog

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.
 
L

Lee

(e-mail address removed) 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>
Click to expand...

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.


--
 
U

usgog

(e-mail address removed) said:





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.

--
Click to expand...

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...
 
E

Evertjan.

addr.style.display='block';

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

but why not set the style to:

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

and there should be no need for the onload in:

A short version:

function toggleRetry(val) {
document.getElementById('retry').style.display =
(val) ?'block' :'none';
}
Hm...it is not working. I added <body onload="toggleRetry(false);">
but I got "addr has no properties" right after loading the page.
Click to expand...

Show the error line.
And
with onclick="toggleRetry(false);return false", after clicking the
link, it still won't display the div...
Click to expand...

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";'
 
E

Evertjan.

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 to expand...
 
H

Herbert Blenner

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>
Click to expand...

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.
 
U

usgog

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.
Click to expand...

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?
 
H

Herbert Blenner

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?- Hide quoted text -

- Show quoted text -
Click to expand...

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.
 
U

usgog

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.
Click to expand...

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...
 
H

Herbert Blenner

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?- Hide quoted text -

- Show quoted text -
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Closing an overlay outside the overlay as well 1
Help with Visual Lightbox: Scripts 2
How to have two html audio players on one page? 0
Javascript DOM 1
Image shifts to the right when export the page to pdf 4
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
SendGrid email issue in responsive Gmail 1

Members online

No members online now.
Total: 40 (members: 0, guests: 40)
Robots: 81

Forum statistics

Threads
473,780
Messages
2,569,609
Members
45,253
Latest member
BlytheFant

Latest Threads

Top