Forum Moderators: open
i am trying to build some elements on a page with JS.
im am using createElement and setAttribute.. this is all fine in FF .. but IE, he's a no play ball..
in FF, i can set all the attributes i want, with no probs, IE will not allow me to set the name of the element.
this is truly driving me mad.
heres some code..
newColourCol4 = document.createElement("td");
newColourCol4Div = document.createElement("div");
newColourCol4Div.setAttribute("align","right");
newColourCol4Div.style.borderWidth="0px";
newColourCol4DivBtn = document.createElement("input");
newColourCol4DivBtn.setAttribute("type","button");
newColourCol4DivBtn.setAttribute("value","Delete");
newColourCol4DivBtn.setAttribute("align","right");
alert("setting attribute");
newColourCol4DivBtn.setAttribute("name","scheme" + iColourSchemeID + "DeleteColour" + iMaxColourID + "Btn");
newColourCol4DivBtn.setAttribute("onClick","js:deleteColour(" + iColourSchemeID + "," + iMaxColourID + ")");
so as you may be able to see, nothing particularly amazing about this lot.. simply the setAttribute refuses to set the name of the element im trying to create..
no error, just doesnt do what its told..
any help as always much appreciated
cheers,
nat
class
for
...and all event handlers
Use good ol' dot syntax. Use the Function constructor as a quick & dirty way to avoid a closure:
newColourCol4DivBtn.onclick = new Function("deleteColour(" + iColourSchemeID + "," + iMaxColourID + ")");
Had confirmed that I have to use the dot syntax in IE for some attributes (although some seemed to work with setAttribute - god knows why). I have set attributes where needed using the dot syntax - .className, .style.borderColor and found that .onClick seems to work either way.
However when attempting this with the name attribute I must have the wrong syntax as .name will not do the job, do you know what is the correct syntax to set the name attribute?
Cheers
Nat
although some seemed to work with setAttribute - god knows why
They nearly all work.
The way to tell is to write the command the way you would in dot syntax:
// this is OK
elmRef.src = "image.jpg"// but these aren't
1) Dot syntax for attribute would cause invalid JS, so the properties are renamed
// class
elmRef.className = "foo"
// for
elmRef.htmlFor = "check2"2) Events: Dots syntax assigns an object, not a string primitive
elmRef.onclick = myFunction;Funnily enough, if you try using setAttribute considering that it is an alias for dot syntax, it will work in IE, but not elsewhere:
elmRef.setAttribute("className") = "foo";
elmRef.setAttribute("onclick") = myFunction;P.S. The style attribute will also give you headaches.
set/getAttribute just isn't ready for primetime, at least for "recognised" attributes/properties.
Conclusion: The naming does work
1) The element has the name
2) The input data is included when the form is submitted (tested with method="GET")
..but you can't reference the element by name
..?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>TEST</title>
</head>
<body>
<!-- OUR FORM -->
<form method="get" action="set_by_script">
<input name="subbutton" type="submit" value="Submit">
</form>
<script type="text/javascript">
/*
* Just some handy stuff
*/
Array.prototype.toString = function(){return this.join('\n')}
var loc = location.href.replace(/\?.*$/,"");
document.forms[0].action = loc;
/*
* First time
*/
if(!location.search)
{
//var testVar = 10;
var newInput = document.createElement("input");
/* both approaches work
* newInput.name = "scheme10" ;
*/
newInput.setAttribute("name","test");
newInput.setAttribute("type","text");
newInput.setAttribute("value","test value");
newInput.setAttribute("align","right");
document.forms[0].appendChild(newInput);
/* checks
*/
alert([
'The new input has a name..',,
'getElementsByTagName("input")[1].name:',
'>> '+document.getElementsByTagName("input")[1].name,,
'..but it cannot be referenced by name..',,
'document.forms[0].test',
'>> '+document.forms[0].test,,
'document.getElementsByName("test").length:',
'>> '+document.getElementsByName("test").length,,
'NOW CLICK "Submit"'
]);
}
/*
* When form submitted to self
*/
else
{
var again = confirm([
'The data IS submitted though..',,
'location.search:',
'>> '+ location.search,,
'DO IT AGAIN?'
]);
if(again)
location.replace(loc);
}
</script>
</body>
</html>
Thanks for spending so much time to demonstrate the (somewhat peculiar) workings of IE for me.
Cheers
Nat
The onclick event which i can set fine either way will not work without the name of the element defined properly. A slight mod to your code so it looks like so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>TEST</title>
</head>
<body>
<!-- OUR FORM -->
<form method="get" action="set_by_script">
<input name="subbutton" type="submit" value="Submit">
</form>
<script type="text/javascript">
function testWorking()
{
alert("working");
}
/*
* Just some handy stuff
*/
Array.prototype.toString = function(){return this.join('\n')}
var loc = location.href.replace(/\?.*$/,"");
document.forms[0].action = loc;
/*
* First time
*/
if(!location.search)
{
//var testVar = 10;
var newInput = document.createElement("input");
/* both approaches work
* newInput.name = "scheme10" ;
*/
newInput.setAttribute("name","test");
newInput.setAttribute("type","text");
newInput.setAttribute("value","test value");
newInput.setAttribute("align","right");
newInput.onclick = "js:testWorking()";
document.forms[0].appendChild(newInput);
/* checks
*/
alert([
'The new input has a name..',,
'getElementsByTagName("input")[1].name:',
'>> '+document.getElementsByTagName("input")[1].name,,
'..but it cannot be referenced by name..',,
'document.forms[0].test',
'>> '+document.forms[0].test,,
'document.getElementsByName("test").length:',
'>> '+document.getElementsByName("test").length,,
'NOW CLICK "Submit"'
]);
}
/*
* When form submitted to self
*/
else
{
var again = confirm([
'The data IS submitted though..',,
'location.search:',
'>> '+ location.search,,
'DO IT AGAIN?'
]);
if(again)
location.replace(loc);
}
</script>
</body>
</html>
Results in a the textbox tag looking like so:
<INPUT onclick=js:testWorking() align=right value="test value">
but clicking on the text box has no effect, however if i use my dom inspector to add the name in to the html whilst it's running, so that it now looks like so:
<INPUT onclick=js:testWorking() align=right value="test value" name="test">
The onclick function now works, ever heard of this happening before?
Thanks again for helping me get through these times of trouble with IE
Nat
newInput.onclick = "js:testWorking()";
An event handler can't be assigned like that via JS (in any browser). You have to assign a function reference:
newInput.onclick = testWorking;
Change it to the above and it will work. You could add a little to the function first, just for extra kicks:
function testWorking()
{
alert(this.name+".value: "+ this.value);
}
<INPUT onclick=js:testWorking() ....>
This shouldn't be done (the js: bit, I mean). The reason it still works is that Javascript interprets it as a label statement [devguru.com], as if it were part of a control structure:
As I've been working on this task as a side project I haven't had that much time to devote to it however i've managed to find some time to do a bit of experimentation and have managed to figure out the last of my troubles with this .onClick event, which was the referencing of a function, passing parameters without actually calling it by doing so.
I've settled on this code which seems to do the job just fine:
newColourCol4DivBtn.onclick = function () {deleteColour (iColourSchemeID,iMaxColourID)};
Just wanted to say thanks for all your help and that i should be fine (fingers crossed) on this now due to your help with these issues.
Cheers
Nat
