Can't change certain styles when passed by addEventListener() when using document.createElement() to create the element

RESOLVED WORKSFORME

Status

()

RESOLVED WORKSFORME
18 years ago
18 years ago

People

(Reporter: arielladog, Assigned: joki)

Tracking

Trunk
x86
Windows ME
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

18 years ago
I've noticed that if I create a td element and then assign an event to a table
cell (other than the first one), some of the CSS styles are only gettable and
not settable.

Here is the base code I've been using:

<html>
<head>
</head>
<body>
<script>
function changeBG(){
	alert(this);
	this.style.backgroundColor='green';
}

function insertNR(x){
	tr = document.createElement("tr");
	td = document.createElement("td");
	td.setAttribute("style","background-color:white;border-width:4;border-style:solid;border-color:black");
	td.setAttribute("id",x);
	text = document.createTextNode("a");
	td.appendChild(text);
	tr.appendChild(td);
	document.getElementsByTagName("table").item(0).appendChild(tr);
}

table = document.createElement("table");
document.body.appendChild(table);
insertNR("td1");insertNR("td2");

document.getElementById("td1").addEventListener("click",changeBG,0);
</script>
</body>
</html> 


Now, when you click on the first table cell, it alerts(), this, correctly, and
it changes the backgroundColor correctly; thus, this proves that using
addEventHandler(), a table cell's CSS backgroundColor can be changed.

Now, if you change the last JavaScript statement to:

document.getElementById("td2").style.backgroundColor='green';

It changes the second table cells backgroundColor to green correctly; thus, this
proves that you can change the backgroundColor of the second table cell.

Now, if you change the "changeBG()" function to:

function changeBG(){
alert(this);
this.style.borderWidth='20';
}

And the last JavaScript line to:

document.getElementById("td2").addEventListener("click",changeBG,0);

When you click on the second table cell, it correctly alerts(), this, and it
correctly changes the borderWidth of the second table cell; thus, this proves
that a CSS style can be changed in the second table cell with addEventListener().

Now, when you change the function, "changeBG()" to this (back to its original
state):

function changeBG(){
alert(this);
this.style.backgroundColor='green';
}

and you change the last JavaScript statement to:

document.getElementById("td2").addEventListener("click",changeBG,0);

You'll notice that when you click on the second table cell, it correctly
alerts(), this, but it doesn't change the backgroundColor.

Note that the same result with backgroundColor can also be achieved by borderColor.

Comment 1

18 years ago
I dont see this on windows 98 build 2001-04-13-04-trunk, the background 
changes correctly...
(Reporter)

Comment 2

18 years ago
Hmmm...on winME, Mozilla 0.8.1 -- Mozilla/5.0 (Windows; U; Win 9x 4.90; en-US; 
0.8.1) Gecko/20010323, the following code doesn't work:

<html>
<head>
</head>
<body>
<script>
function changeBG(){
	alert(this);
	this.style.backgroundColor='green';
}

function insertNR(x){
	tr = document.createElement("tr");
	td = document.createElement("td");
	td.setAttribute("style","background-color:white;border-width:4;border-
style:solid;border-color:black");
	td.setAttribute("id",x);
	text = document.createTextNode("a");
	td.appendChild(text);
	tr.appendChild(td);
	document.getElementsByTagName("table").item(0).appendChild(tr);
}

table = document.createElement("table");
document.body.appendChild(table);
insertNR("td1");insertNR("td2");

document.getElementById("td2").addEventListener("click",changeBG,0);
</script>
</body>
</html> 


Also, note that in changeBG() function, you can replace "this" 
with "event.target" and you get the same results, atleast I do..
(Reporter)

Updated

18 years ago
QA Contact: vladimire → jst

Comment 3

18 years ago
Marking NEW.
Status: UNCONFIRMED → NEW
Ever confirmed: true
(Reporter)

Comment 4

18 years ago
In the latest Mozilla stable build, it seems to be working.  It is working for 
me in Windows ME on:

Mozilla 0.9
Mozilla/5.0 (Windows; U; Win 9x 4.90; en-US; rv:0.9) Gecko/20010505

Comment 5

18 years ago
Marking WORKSFORME as per reporters comments.
Status: NEW → RESOLVED
Last Resolved: 18 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.