Closed Bug 76107 Opened 23 years ago Closed 23 years ago

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

Categories

(Core :: DOM: Events, defect)

Product:
Core
Component:
DOM: Events
Platform:
x86
Windows ME
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED WORKSFORME

People

(Reporter: arielladog, Assigned: joki)

Details

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.
I dont see this on windows 98 build 2001-04-13-04-trunk, the background 
changes correctly...
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..
QA Contact: vladimire → jst
Marking NEW.
Status: UNCONFIRMED → NEW
Ever confirmed: true
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


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