Welcome to the MacNN Forums.

BerkeleyChemist · Aug 13, 2006, 01:16 AM

Why doesn't this work?

<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
div.onclick = makeRed;
function makeRed()
{
this.style.color = 'red';
}
</script>
</head>
<body>
<div>This is a test!</div>
</body>
</html>

Sorry if it's something stupid. I'm just learning.

registered_user · Aug 13, 2006, 01:20 AM

it doesn't work because the variable div is not defined.

DeathMan · Aug 13, 2006, 06:07 PM

<div id="mydiv">Test</div>

document.getElementById('mydiv').onclick = makeRed;

in your case, div isn't a handle, so you need to give it one.

There is a library called prototype that gives you some very interesting functions like
$ (document.getElementById, modified to take either an id, or an element object)
and $$ (I think -- It will getElementsBySelector, IE

$$('div') that would get a collection of all the divs in your document.

or even

$('myDiv').$$('div') which would get you all the divs inside of myDiv.

The syntax on these may be wrong, but the ideas are there. Check out script.aculo.us and prototype.

BerkeleyChemist · Aug 13, 2006, 07:25 PM

Thanks. I'm still not having success, though.

<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
document.getElementById('redclick').onclick = makeRed;
function makeRed()
{
this.style.color = 'red';
}
</script>
</head>
<body>
<div id="redclick">Test</div>
</body>
</html>

DayLateDon · Aug 13, 2006, 07:39 PM

Hello ...

You're not actually *calling* the code that sets the redclick's onclick handler. Wrap that line into a function that gets called when the body of the page loads, something like this:

Code:
<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
function onbodyload()
{
document.getElementById('redclick').onclick = makeRed;
}
function makeRed()
{
document.getElementById('redclick').style.color = 'red';
}
</script>
</head>
<body>
<div id="redclick">Test</div>
</body>
</html>

Works for me.

Alternatively, you could assign the onclick handler as part of the div element:

Code:
<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
function makeRed()
{
document.getElementById('redclick').style.color = 'red';
}
</script>
</head>
<body onload="onbodyload()" >
<div id="redclick" onclick="makeRed()">Test</div>
</body>
</html>

BerkeleyChemist · Aug 13, 2006, 07:47 PM

Ah, that makes sense. Thanks a lot.

I had to put <body onload="onbodyload()">. Is that what you meant to write, or is naming the function onbodyload() supposed to make it do that automatically?

DayLateDon · Aug 13, 2006, 08:23 PM

Originally Posted by BerkeleyChemist

Ah, that makes sense. Thanks a lot.

I had to put <body onload="onbodyload()">. Is that what you meant to write, or is naming the function onbodyload() supposed to make it do that automatically?

The 'onload="onbodyload()"' thing is necessary. (I miscopied my first example.)

SirCastor · Aug 13, 2006, 09:52 PM

but it should be noted that the function is simply named "onBodyLoad()" and has no more significance than writing onload="loadthebody()"

DayLateDon · Aug 13, 2006, 10:11 PM

Correct, SirCastor.

I should have used gone with a more traditional generic function name, such as "myOnLoad()".

BerkeleyChemist · Aug 13, 2006, 10:52 PM

Okay. That's what I thought, but I wanted to make sure.

Hmm... I thought that the 'this' thing would allow the makeRed() function to work for anything that has the 'redclick' attribute, but it doesn't seem to work for other tags. When I try the following code, it only changes color for the first div.

<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
function onbodyload()
{
document.getElementById('redclick').onclick = makeRed;
}
function makeRed()
{
this.style.color = 'red';
}
</script>
</head>
<body onload="onbodyload()">
<div id="redclick">Test</div>
<p id="redclick">Test</p>
<h1 id="redclick">Test</h1>
</body>
</html>

DayLateDon · Aug 14, 2006, 12:40 AM

"id"s have to be unique. (That's why they're called that.)

So, to assign "makeRed" as the onclick handler for multiple divs, you can assign each of the divs an individual id, then add additional lines to the "onbodyload" handler, one for each div.

If you identify your divs conveniently --say, "redclick0", "redclick1", ..., "redclick999"-- you can roll the individual lines of code into a loop:

Code:
var idx;
for ( idx = 0; idx < 1000; idx++ )
  document.getElementById("redclick"+idx).onclick = makeRed;

A somewhat sophisticated --and hardly beginner-friendly-- way to proceed might be to assign the divs to the same *class*, then use a "getElementsByClassName" routine (you can Google for different implementations) to list the divs in an array, and then step through that array with a loop. I've never had a reason to use anything like this in my own projects, but I just thought I'd mention that the strategy exists.

BerkeleyChemist · Aug 14, 2006, 04:06 AM

Okay. I fixed that problem, but it still isn't working.

<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
function onbodyload()
{
var a;
for (a = 0; a < 6; a++)
{
document.getElementById('redclick'+idx).onclick = makeRed;
}
}
function makeRed()
{
this.style.color = 'red';
}
</script>
</head>
<body onload="onbodyload()">
<div id="redclick1">Test</div>
<p id="redclick2">Test</p>
<h1 id="redclick3">Test</h1>
<div id="redclick4">Test</div>
<h3 id="redclick5">Test</h3>
</body>
</html>

Sorry to be so bothersome. I don't really need to use this script for any specific project, but I'm just trying to learn how this all works.

skalie · Aug 14, 2006, 04:45 AM

Originally Posted by BerkeleyChemist

O
for (a = 0; a < 6; a++)
{
document.getElementById('redclick'+idx).onclick = makeRed;
}

try

for (a = 0; a < 6; a++)
{
document.getElementById('redclick'+a).onclick = makeRed;
}

or

for (idx = 0; idx < 6; idx++)
{
document.getElementById('redclick'+idx).onclick = makeRed;
}

BerkeleyChemist · Aug 14, 2006, 04:53 AM

That was a typo. Doesn't work for me either way.

skalie · Aug 14, 2006, 05:13 AM

For some reason the loop is only running once.

for (a = 1; a < 6; a++)
{
document.write(a);
document.getElementById('redclick'+a).onclick = makeRed;
}

...... outputs "1" and nothing else.

skalie · Aug 14, 2006, 05:26 AM

Loop works with

for (var a = 1; a < 6; a++)

but then locks up the browser if the

document.getElementById('redclick'+a).onclick = makeRed;

is included.

Millennium · Aug 14, 2006, 10:29 AM

Personally, I'd recommend something like this instead:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator"
content="HTML Tidy for Mac OS (BBTidy vers 1st December 2002), see www.w3.org" />
<title>JavaScript</title>
<script type="text/javascript">
<!--
function makeRed(elem)
{
  elem.style.color = 'red';
}
//-->
</script>
</head>
<body>
<div onclick="makeRed(this)">Test</div>
<p onclick="makeRed(this)">Test</p>
<h1 onclick="makeRed(this)">Test</h1>
<div onclick="makeRed(this)">Test</div>
<h3 onclick="makeRed(this)">Test</h3>
</body>
</html>

By passing an element into the function as an argument, you can then tell each element to pass itself as the argument using JavaScript's this keyword. In theory, you could also have an element pass a different element to the function, though you'll need some way of finding the second element (getElementById() works fine for this, as long as the second element has an ID to look for),

DayLateDon · Aug 14, 2006, 10:36 AM

As pointed out above, the issues with BC's code were the typo'd "a" vs "idx" variable, and the fact that his loop was beginning at 0 (hence looking for the non-existent element with id "redclick0") instead of 1.

Fixing those *should* work. It does for me. (This is a direct copy-and-paste from working page source.)

Code:
<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
function onbodyload()
{
	var a;
	for (a = 1; a < 6; a++)
{
		document.getElementById('redclick'+a).onclick = makeRed;
}
}
function makeRed()
{
	this.style.color = 'red';
}
</script>
</head>
<body onload="onbodyload()">
<div id="redclick1">Test</div>
<p id="redclick2">Test</p>
<h1 id="redclick3">Test</h1>
<div id="redclick4">Test</div>
<h3 id="redclick5">Test</h3>
</body>
</html>

skalie · Aug 14, 2006, 11:51 AM

Good show Millenium, although do you have any idea why my "document.write(a);" breaks the thing?

<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
function onbodyload()
{
var a;
for (a = 1; a < 6; a++)
{

document.write(a);

document.getElementById('redclick'+a).onclick = makeRed;
}
}
function makeRed()
{
this.style.color = 'red';
}
</script>
</head>
<body onload="onbodyload()">
<div id="redclick1">Test</div>
<p id="redclick2">Test</p>
<h1 id="redclick3">Test</h1>
<div id="redclick4">Test</div>
<h3 id="redclick5">Test</h3>
</body>
</html>

BerkeleyChemist · Aug 14, 2006, 03:22 PM

Fixing the loop problem makes everything work as does using the 'elem' argument. Thanks again.