getElementById in if block still fails to protect me from assignment errors. Why?

lawrence · Nov 19, 2004

I'm playing around with generating layer from a javascript. Strangely,
the code below works fine in FireFox when I assign a color to 'color'
but when I try to assign it to 'background-color' I get the error that
you see below. What is up?

<html>
<head>
</head>
<body>

<script type="text/javascript">

var left = 55;
var top = 0;

for (var i=0; i < 3000; i = i + 60) {

top = i + left;
top = top - i;

var nasty = "ID";
nasty += i;

document.write("<div id='ID" + i + "' style='position:absolute; top:"
+ top + "; left:" + left + "; background-color:#abc;'> <h2>God loves
you</h2> </div>");

left = 5 + i;

document.write(i);
document.write("<br>");
}

if (id = document.getElementById("ID60"))
document.getElementById("ID60").style.background-color = "#9af";
if (id = document.getElementById("ID120"))
document.getElementById("ID120").style.background-color = "#4af";
if (id = document.getElementById("ID180"))
document.getElementById("ID180").style.background-color = "#9a2";

</script>
</body>

Error: invalid assignment left-hand side
Source File: file:///C:/Documents%20and%20Settings/studio/Desktop/sesse/colorTest.htm
Line: 29, Column: 97
Source Code:
if (id = document.getElementById("ID60"))
document.getElementById("ID60").style.background-color = "#9af";

Martin Honnen · Nov 19, 2004

lawrence wrote:

document.getElementById("ID60").style.background-color = "#9af";

That needs to be backgroundColor, you can't have a dash in a JavaScript
identifier thus css-property-name becomes cssPropertyName.

Rob B · Nov 19, 2004

And...this makes no sense:

if (id = document.getElementById("ID60"))
document.getElementById("ID60").style.backgroundColor = "#9af";

You're doing the assignment to 'id' (variable) specifically to avoid
calling .getElementById() twice. Good thinking. Then you discard it.

if (el = document.getElementById("ID60"))
el.style.background = "#9af";

CSS 'background' does all.

Use 'el' or the equivalent: it's an ELement, not an ID.

lawrence · Nov 20, 2004

Thanks for all the feedback. I've incorporated all improvements and it
worked. However, I tried to randomize the x and y co-ordinates and now
the for() loop only runs once and stops. Why?

<script type="text/javascript">

var left = Math.round(800* Math.random());
var top = Math.round(600*Math.random());
var nasty = "ID";

for (var i=0; i < 100; i++) {
nasty += i;

document.write("<div id='ID" + i + "' style='position:absolute; top:"
+ top + "; left:" + left + ";');

}

</script>

Michael Winter · Nov 20, 2004

[snip]

[T]he for() loop only runs once and stops. Why?

A syntax error.

<script type="text/javascript">

var left = Math.round(800* Math.random());

That should actually be

var left = Math.floor(800 * Math.random());

and the same for the line below.

var top = Math.round(600*Math.random());

However, if these are to be of much use, they should be re-evaluated
during the loop so that each "layer" is placed at a different location.

var nasty = "ID";

What exactly is this...

for (var i=0; i < 100; i++) {
nasty += i;

....and this used for, by the way?

[Slightly altered:]

document.write("<div id='ID" + i + "' style='position:absolute; "
+ "top:" + top + "; "

You've neglected to include a unit here, which is invalid. The second line
should be

+ "top:" + top + "px; "

and the same below.

+ "left:" + left + ";');

This is where the syntax error occurs. You haven't closed the outer quote
so you're left with an unterminated string literal. Also, you haven't
provided a closing tag for the DIV, or any content for that matter.

[snip]

Take a look at:

for(var i = 0; i < 100; ++i) {
var left = Math.floor(800 * (Math.random() % 1)),
top = Math.floor(600 * (Math.random() % 1));

document.write('<div id="ID' + i + '" style="position:absolute; '
+ 'top:' + top + 'px; left:' + left + 'px;">Hi!<\/div>');
}

Hope that helps,
Mike

lawrence · Nov 21, 2004

Michael Winter said:
That should actually be

var left = Math.floor(800 * Math.random());

Why is that? Why not round()?

Thanks for all the help on all other issues. I managed to get things
up and running. Now I'm trying to call this with setTimeout(), but it
overwhelms the browsers. How to blank the whole screen so one can
start over? I tried document.value = '' .

You've neglected to include a unit here, which is invalid. The second line
should be

+ "top:" + top + "px; "

I know. I'm surprised I got away with that. The debugger in FireFox
didn't even through a warning, which it should. This worked in IE,
Netscape 7.1 and FireFox. Nevertheless, I'd add the "px" before I
went to production with this.

Thanks again for all the help.

Michael Winter · Nov 21, 2004

[lawrence:]

That should actually be

var left = Math.floor(800 * Math.random());

Click to expand...

Why is that? Why not round()?

It affects the probability of the possible values. When you multiply the
value returned by Math.random by a number, n, you should expect a result
in the range 0 <= x < n. Note that's less than n, not less-than or
equal-to. Truncating with Math.floor maintains an equal distribution in
this range.

If you use Math.round, you change the range to 0 <= x <= n and you half
the probability of getting 0 and n. Whilst you probably couldn't care less
in most cases, it's a mistake that most people make without realising.

Thanks for all the help on all other issues.

You're welcome. It's a good way to check my own understanding as there are
several regulars that would correct me if I said something wrong (well,
that's the idea anyway).

[snip]

Now I'm trying to call this with setTimeout(), but it overwhelms the
browsers.

It isn't an insignificant sequence of operations. It will probably take a
long time to complete.

How to blank the whole screen so one can start over? I tried
document.value = '' .

If you want to do that once the page has finished loading, you could
conceivably write

document.open();
document.close();

which would open the document for writing (clearing it), then closing it
again. Haven't tried it, though.

You've neglected to include a unit [...], which is invalid. [...]

Click to expand...

I know. I'm surprised I got away with that. The debugger in FireFox
didn't even through a warning, which it should.

Actually, it shouldn't. There's nothing syntactically wrong, as far as the
script is concerned, with omitting the unit, but it does generate invalid
CSS which the browser could ignore if it wanted.

[snip]

Mike

How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
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	Jan 10, 2021
Please Help?	0	Jul 23, 2022
Help me sort out this script	1	Oct 17, 2023
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Why is the e.target not working here?	1	Dec 29, 2022
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022

getElementById in if block still fails to protect me from assignment errors. Why?

lawrence

Martin Honnen

Rob B

lawrence

Michael Winter

lawrence

Michael Winter

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads