Do I just suck at javascript? (works in Chrome/FF, not in IE)

Ichinisan · Oct 20, 2011

I haven't actually read a JScript book or anything, but I'm trying to accomplish basic tasks by using Google and applying my limited BASIC experience.

Here, I've written yet another bit of code that works perfectly in Chrome/FF, but doesn't work in IE:

PHP:

<HTML>
<HEAD>
<TITLE>IE SUCKS!</TITLE>
<SCRIPT language="javascript">

// create global variable to track number of rows
var rowCount=0;

function addRow()
{
    // a row is being added, so rowCount must be increased
    rowCount+=1;

    // div
    var divrowelement=document.createElement("div");
    divrowelement.setAttribute("id","divrow"+rowCount);
    document.getElementById("divcontainingrows").appendChild(divrowelement);
    // textbox
    var inputelement=document.createElement("input");
    inputelement.setAttribute("id","textbox"+rowCount);
    inputelement.setAttribute("type","textbox");
    inputelement.setAttribute("value",rowCount);
    document.getElementById("divrow"+rowCount).appendChild(inputelement);
    // button
    var deleteelement=document.createElement("input");
    deleteelement.setAttribute("id","btndelete"+rowCount);
    deleteelement.setAttribute("type","button");
    deleteelement.setAttribute("value","Remove");
    deleteelement.setAttribute("onClick","removeRow("+rowCount+")");
    document.getElementById("divrow"+rowCount).appendChild(deleteelement);

    // disable the "Remove" button in row1 if there is only 1 row, prevents user from removing last remaining row
    // enable the "Remove" button in row1 if there is more than one row
    document.getElementById("btndelete1").disabled=(rowCount==1);
}
function removeRow(rowToRemove)
{
    alert("Removing row"+rowCount);
    document.getElementById("divrow"+rowToRemove).parentNode.removeChild(document.getElementById("divrow"+rowToRemove));

    for (var i=rowToRemove+1;i<=rowCount;i+=1)
    {
        // for debug purposes
        alert("Renaming divrow"+i);
        // rename div
        document.getElementById("divrow"+i).setAttribute("id","divrow"+(i-1));
        // rename textbox
        document.getElementById("textbox"+i).setAttribute("value",(i-1));
        document.getElementById("textbox"+i).setAttribute("id","textbox"+(i-1));
        // rename button
        document.getElementById("btndelete"+i).setAttribute("onClick","removeRow("+(i-1)+");");
        document.getElementById("btndelete"+i).setAttribute("id","btndelete"+(i-1));
    }

    // a row has been removed, so rowCount must be decreased
    rowCount-=1;

    // disable the "Remove" button in row1 if there is only 1 row, prevents user from removing last remaining row
    // enable the "Remove" button in row1 if there is more than one row
    document.getElementById("btndelete1").disabled=(rowCount==1);
}
</SCRIPT>
</HEAD>
<BODY onload="addRow()">
<FORM>
    <div id="divcontainingrows"></div>
    <INPUT type="button" value="Add" onclick="addRow()"/>
</FORM>
</BODY>
</HTML>

- This shows a row containing a textbox and a "Remove" button.
- Below that is a single "Add" button.
- Each time the "Add" button is clicked, another row is added to the DIV above it.
- Each "Remove" button will remove the row that contains it.
- When only 1 row remains, the remaining "Remove" button is disabled and cannot be clicked.

For some reason, in IE, the "Remove" buttons that are added during runtime will not fire their onClick event. This works perfectly in Chrome and Firefox.

I can add this button to the HTML part (so it's not added during runtime). It removes the last row using the same removeRow() function, and works fine in IE:

PHP:

<INPUT type="button" value="Remove" onclick="removeRow(rowCount)"/>

You guys have been extremely helpful with my past challenges, so maybe you can tell me again: What am I doing wrong?

Thanks!

MrChad · Oct 20, 2011

Probably better to use addEventListener or attachEvent to add a click event handler, rather than add an "onclick" attribute. IE uses attachEvent while other browsers use addEventListener, but you can find libraries / functions online that will give you a cross-browser solution for event handlers.

EDIT: http://www.quirksmode.org/js/events_advanced.html has some examples. Make sure you clean up event handler codes as well if you add remove a lot of HTML elements or you'll experience memory leaks in IE (see MSDN or Douglas Crockford's page for more info).

Snapster · Oct 20, 2011

IE won't create events for dynamic elements without you being explicit, you'll need to do something like:

deleteelement.onclick = function(){
removeRow(rowCount);
};

Ichinisan · Oct 20, 2011

MrChad said:
Probably better to use addEventListener or attachEvent to add a click event handler, rather than add an "onclick" attribute. IE uses attachEvent while other browsers use addEventListener, but you can find libraries / functions online that will give you a cross-browser solution for event handlers.

EDIT: http://www.quirksmode.org/js/events_advanced.html has some examples. Make sure you clean up event handler codes as well if you add remove a lot of HTML elements or you'll experience memory leaks in IE (see MSDN or Douglas Crockford's page for more info).

Thanks.

Wow. There's seriously no universal function for adding an event handler during runtime? You'd think this would have been worked out back in 2005 or so.

DaveSimmons · Oct 20, 2011

Also be careful that IE _appends_ events, it doesn't replace existing ones.

If you want to toggle between two even handlers, you need to route them both through a single function, and use something like a global variable to control which handler is used. Bleagh.

MrChad · Oct 20, 2011

Ichinisan said:
Thanks.

Wow. There's seriously no universal function for adding an event handler during runtime? You'd think this would have been worked out back in 2005 or so.

IE9 supports addEventListener, but, yes, the browser differences are frustrating. It's best to use feature detection rather than browser detection to handle the differences.

Code:

if (window.addEventListener) {
   ...
} else if (window.attachEvent) {
   ...
}

hooflung · Oct 20, 2011

You could get around cross browser incompatibilities by using JQuery or its ilk.

Ichinisan · Oct 20, 2011

MrChad said:
IE9 supports addEventListener, but, yes, the browser differences are frustrating. It's best to use feature detection rather than browser detection to handle the differences.

Code:

if (window.addEventListener) { ... } else if (window.attachEvent) { ... }

I tried your suggestion and added it the beginning of my addRow() function (because that function is called by body onload).

PHP:

alert("I hope you don't mind if I check your browser...");
if (window.attachEvent)
{
	alert("Looks like IE.");
}
else if (window.addEventListener)
{
	alert("Looks like Chrome. Niiiice.");
}
alert("Done checking. I'll do something else now...");
// the rest of the addRow() function

When the page loads...

- IE gives me all three alert boxes.
- Chrome only gives me the first alert box. The conditional alert doesn't appear and the rest of the function does not execute.

When I click the "Add" button on my page and the addRow() function is executed again, I get all three alert boxes and the function finishes executing.

It looks like checking those functions will glitch Chrome if it's checked while the page is still loading. I don't want to make the code overly complex. This would be such a simple fix if it worked

Ichinisan · Oct 20, 2011

Snapster said:
IE won't create events for dynamic elements without you being explicit, you'll need to do something like:

deleteelement.onclick = function(){
removeRow(rowCount);
};

I tried your suggestion too; but each "Remove" button removes the last row ("divrow"+rowCount) instead of removing its own row.

MrChad · Oct 20, 2011

http://dean.edwards.name/weblog/2005/10/add-event2/

This code should work in all browsers.

the182guy · Oct 21, 2011

Ichinisan said:
Thanks.

Wow. There's seriously no universal function for adding an event handler during runtime? You'd think this would have been worked out back in 2005 or so.

Have a look at the jQuery framework, this will let you add click events to elements in a single universal way like:

Code:

$('#myElementId').click(function(){

   // do something

});

beginner99 · Oct 21, 2011

hooflung said:
You could get around cross browser incompatibilities by using JQuery or its ilk.

this

Stuxnet · Oct 23, 2011

beginner99 said:
this

ditto

95% of my JS these days is done via JQuery. My cross-browser headaches have been substantially reduced.

Do I just suck at javascript? (works in Chrome/FF, not in IE)

Ichinisan

Lifer

MrChad

Lifer

Snapster

Diamond Member

Ichinisan

Lifer

DaveSimmons

Elite Member

MrChad

Lifer

hooflung

Golden Member

Ichinisan

Lifer

Ichinisan

Lifer

MrChad

Lifer

the182guy

Member

beginner99

Diamond Member

Stuxnet

Diamond Member

TRENDING THREADS