|
|
Anyone know JavaScript?
|
|
|
|
Fresh-Faced Recruit
Join Date: Jun 2006
Location: Berkeley, CA
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status:
Offline
|
|
it doesn't work because the variable div is not defined.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Aug 2001
Location: Capitol City
Status:
Offline
|
|
<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.
|
|
|
|
|
|
|
|
|
Fresh-Faced Recruit
Join Date: Jun 2006
Location: Berkeley, CA
Status:
Offline
|
|
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>
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2000
Status:
Offline
|
|
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>
|
|
|
|
|
|
|
|
|
Fresh-Faced Recruit
Join Date: Jun 2006
Location: Berkeley, CA
Status:
Offline
|
|
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?
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2000
Status:
Offline
|
|
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.)
|
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Jan 2001
Location: Salt Lake City, UT USA
Status:
Offline
|
|
but it should be noted that the function is simply named "onBodyLoad()" and has no more significance than writing onload="loadthebody()"
|
2008 iMac 3.06 Ghz, 2GB Memory, GeForce 8800, 500GB HD, SuperDrive
8gb iPhone on Tmobile
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2000
Status:
Offline
|
|
Correct, SirCastor.
I should have used gone with a more traditional generic function name, such as "myOnLoad()".
|
|
|
|
|
|
|
|
|
Fresh-Faced Recruit
Join Date: Jun 2006
Location: Berkeley, CA
Status:
Offline
|
|
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>
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2000
Status:
Offline
|
|
"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.
|
|
|
|
|
|
|
|
|
Fresh-Faced Recruit
Join Date: Jun 2006
Location: Berkeley, CA
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status:
Offline
|
|
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;
}
|
|
|
|
|
|
|
|
|
Fresh-Faced Recruit
Join Date: Jun 2006
Location: Berkeley, CA
Status:
Offline
|
|
That was a typo. Doesn't work for me either way.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Nov 1999
Status:
Offline
|
|
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),
|
You are in Soviet Russia. It is dark. Grue is likely to be eaten by YOU!
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2000
Status:
Offline
|
|
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>
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status:
Offline
|
|
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>
|
|
|
|
|
|
|
|
|
Fresh-Faced Recruit
Join Date: Jun 2006
Location: Berkeley, CA
Status:
Offline
|
|
Fixing the loop problem makes everything work as does using the 'elem' argument. Thanks again.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|