Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #14630 > unrolled thread

Can't get onmouseover to work

Back to article view | Back to comp.lang.javascript

Contents

  Can't get onmouseover to work dwarnold45@suddenlink.net - 2012-06-23 14:07 -0700
    Re: Can't get onmouseover to work Bjoern Hoehrmann <bjoern@hoehrmann.de> - 2012-06-23 23:21 +0200
      Re: Can't get onmouseover to work Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-06-24 04:00 +0200
    Re: Can't get onmouseover to work "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-06-23 21:52 +0000
    Re: Can't get onmouseover to work dwarnold45@suddenlink.net - 2012-06-23 17:35 -0700

#14630 — Can't get onmouseover to work

All,

I'm on page 115 of Resig's Pro Javascript Techniques (2006) and I can't get the following code to work. When the mouse hovers over the link, nothing happens to the background color.

Any ideas?

David.

<!DOCTYPE html>
<html>
<head>
<title>Pro Javascript -- Events</title>

<script>
window.onload = loaded;

function loaded() {
	document.getElementById('body').style.border="1px solid #000";
}

var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
	li[i].onmouseover = function() {
		this.style.backgroundColor = "blue";
	};
	li[i].onmouseout = function() {
		this.style.backgroundColor = "white";
	};
}
</script>
</head>

<body id="body">
<h1>Pro Javascript -- Events</h1>

<p>Now is the time.</p>

<ul>
	<li><a href="#">First Link</a></li>
	<li><a href="#">Second Link</a></li>
</ul>

</body>
</html>

[toc] | [next] | [standalone]

#14631

* dwarnold45@suddenlink.net wrote in comp.lang.javascript:
>I'm on page 115 of Resig's Pro Javascript Techniques (2006) and I can't
>get the following code to work. When the mouse hovers over the link,
>nothing happens to the background color.

><!DOCTYPE html>
><html>
><head>
><title>Pro Javascript -- Events</title>
>
><script>
>window.onload = loaded;
>
>function loaded() {
>	document.getElementById('body').style.border="1px solid #000";
>}
>
>var li = document.getElementsByTagName("li");

There are no <li> elements in the document when this code is executed.
-- 
Björn Höhrmann · mailto:bjoern@hoehrmann.de · http://bjoern.hoehrmann.de
Am Badedeich 7 · Telefon: +49(0)160/4415681 · http://www.bjoernsworld.de
25899 Dagebüll · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ 

[toc] | [prev] | [next] | [standalone]

#14642

Bjoern Hoehrmann wrote:

> * dwarnold45@suddenlink.net wrote in comp.lang.javascript:
>>I'm on page 115 of Resig's Pro Javascript Techniques (2006) and I can't
>>get the following code to work. When the mouse hovers over the link,
>>nothing happens to the background color.
> 
>><!DOCTYPE html>
>><html>
>><head>
>><title>Pro Javascript -- Events</title>
>>
>><script>
>>window.onload = loaded;
>>
>>function loaded() {
>>document.getElementById('body').style.border="1px solid #000";
>>}
>>
>>var li = document.getElementsByTagName("li");
> 
> There are no <li> elements in the document when this code is executed.

Which again points out that this book belongs in the "Worst books on this 
topic" category.  Either it has the bad example verbatim, or it fails badly 
in teaching its dedicated reader how DOM scripting works.  Given that "valid 
HTML is simply a subset of XML" (probably the most ridiculous claim in this 
book, to be found on page 8), both are equally likely.


PointedEars
-- 
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

[toc] | [prev] | [next] | [standalone]

#14633

 wrote on 23 jun 2012 in comp.lang.javascript:

> All,
> 
> I'm on page 115 of Resig's Pro Javascript Techniques (2006) and I
> can't get the following code to work. When the mouse hovers over the
> link, nothing happens to the background color. 
> 
> Any ideas?
> 
> David.
> 
> <!DOCTYPE html>
> <html>
> <head>
> <title>Pro Javascript -- Events</title>
> 
> <script>
> window.onload = loaded;
> 
> function loaded() {
>      document.getElementById('body').style.border="1px solid #000";
>}
> 
> var li = document.getElementsByTagName("li");
> for (var i = 0; i < li.length; i++) {
>      li[i].onmouseover = function() {
>           this.style.backgroundColor = "blue";
>     };
>      li[i].onmouseout = function() {
>           this.style.backgroundColor = "white";
>     };
>}
> </script>

You made some errors in "}" positioning,
not visible due to incorrect indenting

Try this:

<script type='text/javascript'>
window.onload = loaded;

function loaded() {
  document.getElementById('body').style.border="1px solid #000";

  var li = document.getElementsByTagName("li");
  for (var i = 0; i < li.length; i++) {
    li[i].onmouseover = function() {
      this.style.backgroundColor = "blue";
    };
    li[i].onmouseout = function() {
      this.style.backgroundColor = "white";
    };
  };
};
</script>




> </head>
> 
> <body id="body">
> <h1>Pro Javascript -- Events</h1>
> 
> <p>Now is the time.</p>
> 
> <ul>
>      <li><a href="#">First Link</a></li>
>      <li><a href="#">Second Link</a></li>
> </ul>
> 
> </body>
> </html>
> 



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#14640

Bjoern, Evertjan,

Thanks for the reply. This really helped.

David.

On Saturday, June 23, 2012 2:07:25 PM UTC-7, (unknown) wrote:
> All,
> 
> I'm on page 115 of Resig's Pro Javascript Techniques (2006) and I can't get the following code to work. When the mouse hovers over the link, nothing happens to the background color.
> 
> Any ideas?
> 
> David.
> 
> <!DOCTYPE html>
> <html>
> <head>
> <title>Pro Javascript -- Events</title>
> 
> <script>
> window.onload = loaded;
> 
> function loaded() {
> 	document.getElementById('body').style.border="1px solid #000";
> }
> 
> var li = document.getElementsByTagName("li");
> for (var i = 0; i < li.length; i++) {
> 	li[i].onmouseover = function() {
> 		this.style.backgroundColor = "blue";
> 	};
> 	li[i].onmouseout = function() {
> 		this.style.backgroundColor = "white";
> 	};
> }
> </script>
> </head>
> 
> <body id="body">
> <h1>Pro Javascript -- Events</h1>
> 
> 
> Now is the time.</p>
> 
> <ul>
> 	<li><a href="#">First Link</a></li>
> 	<li><a href="#">Second Link</a></li>
> </ul>
> 
> </body>
> </html>

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web