getElementsByTagName help please

goldtech · Mar 18, 2011

Hi,

Learning JS and have problem and I'll list the js file and the html
file below. The alert(links.length); shows up as 0, so somethings not
working. Help appreciated. Thanks:

js file start:

window.onload = prepareLinks();
function prepareLinks() {
alert('Inside function prepareLinks');
var links = document.getElementsByTagName('a');
alert(links.length);
for (var i=0; i<links.length; i++) {
if (links.classname == "popup") {
links.onclick = function() {
popUp(this.getAttribute("href"));
return false;
}
}
}
}

function popUp(winURL) {
window.open(winURL,"popup","width=320,height=480");
}

js file end.

Html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<script type="text/javascript" src="scripts/showPic2.js"></script>

</head>
<body>

<a href="http://www.yahoo.com/" class="popup">Test1</a>
<a href="http://www.bing.com/" class="popup">Test2</a>

</body>
</html>

RobG · Mar 18, 2011

Hi,

Learning JS and have problem and I'll list the js file and the html
file below. The alert(links.length); shows up as 0, so somethings not
working. Help appreciated. Thanks:

js file start:

window.onload = prepareLinks();

That will assign the result of running prepareLinks to the
window.onload property, I think you mean to assign a reference, so:

window.onload = prepareLinks;

function prepareLinks() {
alert('Inside function prepareLinks');
var links = document.getElementsByTagName('a');

There is a document.links collection that is all the links in the
document. Note that A elements aren't necessarily links, they might be
anchors, and that AREA elements can be links too:

alert(links.length);
for (var i=0; i<links.length; i++) {
if (links.classname == "popup") {

Javascript is case sensitive, the property you seek is "className",
note capitalisation.

links.onclick = function() {
popUp(this.getAttribute("href"));

Click to expand...

Do not use getAttribute, access the property directly. While it is OK
here, there are numerous quirks with get/setAttribute in other places
so it's best to just avoid them altogether in HTML documents. So:

popUp(this.href);

return false;
}

Click to expand...

That will create a function for each link. It is more efficient to
include a single "showInWindow" function and add the listener as a
reference, e.g.

function showInWindow(){
popUp(this.href);
return false;
}

function prepareLinks() {
var links;
var links = document.links;

for (var i=0, iLen=links.length; i<iLen; i++) {
link = links;

if (link.className == "popup") {

// Add reference to function
link.onclick = showInWindow;
}
}
}

And just use HTML 4.01 strict for documents, there's no point using
XHTML on the web unless you have a specific need.

RobG · Mar 18, 2011

On Mar 18 said:
function prepareLinks() {
var links;

Ooops:

var link;

Denis McMahon · Mar 18, 2011

window.onload = prepareLinks();

<body>

Instead of assigning the onload attribute of the window DOM element to
the value returned by the prepareLinks() function, I would use the onload
attribute of the body element like this:

<body onload="prepareLinks();">

You should probably also wrap your content in a block element, i.e. put a
<p></p> round the <a></a> elements.

Rgds

Denis McMahon

goldtech · Mar 18, 2011

Just want to thank you and the other posters for the help! The JS
works now and I learned a lot from your posts.

Thomas 'PointedEars' Lahn · Mar 18, 2011

Denis said:
window.onload = prepareLinks();

<body>

Click to expand...

Instead of assigning the onload attribute of the window DOM element [â€¦]

The proper term is "the DOM _object_ referred to by `window'". `window'
does _not_ refer to an element as it is understood in the DOM, it does not
refer to an object that implements the (HTML)Element interface (but one
implementing the AbstractView interface instead.)

You should probably also wrap your content in a block element, i.e. put a
<p></p> round the <a></a> elements.

Since a single link does not constitute a paragraph, the `div' element
should be used instead.

PointedEars

Help please	8	Jul 7, 2023
Please Help?	0	Jul 23, 2022
XHTML - how extend/create ELEMENT body in my DTD?	0	Oct 29, 2019
Help with my responsive home page	2	Dec 14, 2022
How do I hide the modal after 5 seconds?	4	Jun 1, 2023
getElementsByTagName select element weirdness	5	Aug 2, 2008
Troubles with Fullpage / please help	0	Dec 14, 2023
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button	3	Nov 9, 2022

getElementsByTagName help please

goldtech

RobG

RobG

Denis McMahon

goldtech

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads