...

View Full Version : IE set onclick Object doesn't support this action



jcobban
09-15-2011, 09:47 PM
I have looked at the various posts about setting onclick in IE and I cannot see any that exactly describe the problem I am having.

Firstly I am not trying to set onclick by calling setAttribute, which most of the posts describe. I am simply assigning a value to the onclick attribute of the element, which those posts seem to imply.

Specifically I am getting "Object doesn't support this action" on the following line:

editButton.onclick = editCitation;
editCitation is already a function, so I do not see why I should have to wrap it in an anonymous function wrapper to get IE to permit the assignment.

xelawho
09-15-2011, 09:54 PM
can you post a little more code?

how are you defining editButton, for example?

DaveyErwin
09-15-2011, 10:02 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">
function editCitation(){alert('x')}
function init(){
var editButton = document.getElementById("editButton");
editButton.onclick = editCitation;
}
</script>

</head>
<body onload = "init()">
<p>
<input type="button" id="editButton" value="Required" >
</p>

</body>
</html>

Maybe the body onload is the part
you were missing ?

jcobban
09-16-2011, 01:50 AM
can you post a little more code?

how are you defining editButton, for example?

The code to create and initialize the button is:


var editButton = createNamedElement("button",
"editCitation" + rowNum);
editButton.type = 'button';
editButton.onclick = editCitation; <--- fails here
editButton.appendChild(document.createTextNode('Edit Citation'));
td1.appendChild(editButton);

where the function editCitation is defined in the same source file as:


function editCitation()
{
var form = this.form;
var rownum = this.name.substr(12);
var idsxInput = form.elements["idsx" + rownum];
var idsx = idsxInput.value;
window.open("editCitation.php?idsx=" + idsx,
"citation",
"width=780,height=450,status=yes,resizable=yes,scrollbars=yes");
} // editCitation

and the function createNamedElement is to kluge around the fact that IE does not permit you to set the name attribute of an element, and is defined as:


function createNamedElement(type, name)

{

var element = null;

// Try the IE way; this fails on standards-compliant browsers

try {

element = document.createElement('<'+type+' name="'+name+'">');

} catch (e) {

}

if (!element || element.nodeName != type.toUpperCase()) {

// Non-IE browser; use canonical method to create named element

element = document.createElement(type);

element.name = name;

}

return element;

} // createNamedElement

DaveyErwin
09-16-2011, 02:33 AM
Let's discuss this code.





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">

rowNum = "";
function init(){
var td1 = document.getElementById("td1");
var editButton = createNamedElement("button","editCitation" + rowNum);
editButton.onclick= editCitation; //<--- doesn't fails here
editButton.appendChild(document.createTextNode('Edit Citation'));
td1.appendChild(editButton);
alert(editButton.name)
}
function editCitation(){
alert('x')
}

function createNamedElement(type, name){
var element = null;
element = document.createElement("type");
element.name = name;
element.setAttribute("name",name);
return element;
}
</script>
</head>
<body onload="init()">
<div id="td1"></div>
</body></html>
--------------------------------------------------------------------------------

xelawho
09-16-2011, 02:36 AM
works better for me like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">

rowNum = "";
function init(){
var td1 = document.getElementById("td1");
var editButton = document.createElement("button"+ rowNum);
editButton.name = 'editCitation';
//editButton.type = 'button';
editButton.onclick= editCitation;
editButton.appendChild(document.createTextNode('Edit Citation'));
td1.appendChild(editButton);
alert(editButton.name)
}
function editCitation(){
alert('x')
}

function createNamedElement(type, name){
var element = null;
element = document.createElement("type");
element.name = name;
element.setAttribute("name",name);
return element;
}
</script>
</head>
<body onload="init()">
<div id="td1"></div>
</body></html>

DaveyErwin
09-16-2011, 03:39 AM
works better for me like this:


Yeah , that was a needless line alright:)

xelawho
09-16-2011, 03:51 AM
Yeah , that was a needless line alright:)

aw. I thought we were having a discussion.

Aren't we trying to make a button here?

DaveyErwin
09-16-2011, 03:58 AM
well uh

element = document.createElement('<input type="'+type+'" name="'+name+'">');

makes a very nice button

xelawho
09-16-2011, 04:17 AM
well uh
element = document.createElement('<input type="'+type+'" name="'+name+'">');
makes a very nice button

mmm... not in my broswers...

but it looks like I'm about as good at having a discussion as I am at reading the second part of people's posts... I don't get the need to kluge around or make separate functions. This works in IE and the others for me...


<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">

rowNum = "";
function init(){
var td1 = document.getElementById("td1");
var editButton = document.createElement("button");
editButton.name = 'editCitation'+ rowNum;
editButton.onclick= editCitation;
editButton.appendChild(document.createTextNode('Edit Citation'));
td1.appendChild(editButton);
alert(editButton.name)
}
function editCitation(){
alert('x')
}

</script>
</head>
<body onload="init()">
<div id="td1"></div>
</body>
</html>

DaveyErwin
09-16-2011, 04:29 AM
Yeah i dont get the kludge stuff ?

But this works for me in ie8 and firefox ...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">

rowNum = "";
function init(){
var td1 = document.getElementById("td1");
var editButton = document.createElement("button"+ rowNum);
editButton.name = 'editCitation';
editButton.onclick= editCitation; //<--- fails here
//editButton.type = 'button';
editButton.appendChild(document.createTextNode('Edit Citation'));
td1.appendChild(editButton);
alert(editButton.name)
}
function editCitation(){
alert('x')
}

function createNamedElement(type, name){
var element = null;
//element = document.createElement("type");
element = document.createElement('<input type="'+type+'" name="'+name+'">');
//element.name = name;
//element.setAttribute("name",name);
return element;
}
</script>
</head>
<body onload="init()">
<div id="td1"></div>
</body></html>


Of course you found what i think is the
real problem right here ..

editButton.type= 'button';

type can't be assigned string
in ie ...


IE does not like to change dynamically the type

jcobban
09-16-2011, 05:38 PM
Yeah i dont get the kludge stuff ?

But this works for me in ie8 and firefox ...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">

rowNum = "";
function init(){
var td1 = document.getElementById("td1");
var editButton = document.createElement("button"+ rowNum);
editButton.name = 'editCitation';
editButton.onclick= editCitation; //<--- fails here
//editButton.type = 'button';
editButton.appendChild(document.createTextNode('Edit Citation'));
td1.appendChild(editButton);
alert(editButton.name)
}
function editCitation(){
alert('x')
}

function createNamedElement(type, name){
var element = null;
//element = document.createElement("type");
element = document.createElement('<input type="'+type+'" name="'+name+'">');
//element.name = name;
//element.setAttribute("name",name);
return element;
}
</script>
</head>
<body onload="init()">
<div id="td1"></div>
</body></html>


Of course you found what i think is the
real problem right here ..

editButton.type= 'button';

type can't be assigned string
in ie ...

IE, at least through 7, which is what I am testing with because it is still common out there (being the default on WinXP, and the original installed browser on Vista), does not permit you to change the type once the element is inserted into the DOM, but does permit changing it before it is inserted. I have hit this problem particularly with trying to change <input type='text'> to <input type='hidden'> to hide an input text field that is not required if other values are set. To deal with that, for example, you have to clone the <input type='text'> element, change the type of the clone to hidden, and then swap the two copies.

My issue is that even though the assignment to the name attribute appears to succeed: You can check the value and it comes back as assigned and there is no exception thrown, IE7 does not add the element into form.elements when the element is inserted into the DOM except if you use the non-standard IE form of createElement. I do not understand why that is the case for IE since until the element is inserted into the DOM there is no way to determine which <form> element the element is to be made a named element of. If the name is not inserted into the form.elements hash I cannot later locate the element using form.elements['namevalue']. I did a "for (name in form.elements)" to verify that the name really was not present. The onclick assignment works fine for elements created by W3C style createElement, but such elements are not in form.elements! But if I use IE style createElement("<button name='buttonname'>") then IE throws an exception when I try to assign a value to onclick!

So I seem to have a catch-22. I can either assign a name to an element or an onclick handler, but I apparently cannot do both for the same element in IE7.

Of course assigning a name to a button may seem kind of pointless or even counter-productive, since a button does not carry a useful value that can be passed to an action script. Indeed assigning a name to a button causes grief for the action script in IE because it actually causes a buttonname=buttonname field to be added to the URI, which means the action script must ignore parameters whose names are buttons in the invoking scripts, something that is not necessary in Firefox. However on my pages if you press the F1 key while the focus is on any input element, it pops up balloon help for the element based upon the name value, which for a button explains what clicking on the button will do. If I do not assign a name to the button then an error dialog pops up that there is no matching division of the appropriate name in the original page, or else I would have to use the exact same help text for every button on the page.

xelawho
09-16-2011, 06:21 PM
ah, I get the problem now.

have you tried setting the attributes?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">




rowNum = 3;
function init(){
var td1 = document.getElementById("td1");
var editButton = document.createElement("input");
editButton.setAttribute("name", 'your button'+ rowNum);
editButton.setAttribute("type", "button");
editButton.setAttribute("onclick", "editCitation()")
editButton.setAttribute("value",'Edit Citation');
td1.appendChild(editButton);
alert(editButton.name)
}
function editCitation(){
alert('x')
}

function getButtonNames () {
var node_list = document.getElementsByTagName('input');
for (var i = 0; i < node_list.length; i++) {
var node = node_list[i];
if (node.getAttribute('type') == 'button') {
alert(node.name);
}
}
}
</script>
</head>
<body onload="init()">
<div id="td1"></div>
<input type="button" name="my button" value="Get Names" onClick="getButtonNames()">
</body>
</html>


sorry, don't have the real IE7, but seems to work in compatibility mode

xelawho
09-16-2011, 06:43 PM
or, more simply (and I believe better for cross-browser blah blah):


var editButton2 = document.createElement("input");
editButton2.name = 'your other button'+ rowNum;
editButton2.type = 'button';
editButton2.onclick= editCitation;
editButton2.value= "edit Citation 2";
td1.appendChild(editButton2);

DaveyErwin
09-16-2011, 07:57 PM
never mind !

DaveyErwin
09-17-2011, 04:51 PM
Tested in ie6, ie7, ie8 and firefox 6,
creates elements that can have a
name and can have an onclick
assigned.





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>

<script type="text/javascript">

function init(){
var td1 = document.getElementById("td1");
var myButton = createNamedElement("input","idbt1","button1","button")
myButton.onclick = dosumthing;
myButton.value = 'dosumthing';
td1.appendChild(myButton);
td1.appendChild(createNamedElement("input","idtb1","textbox1","text"));
td1.appendChild(createNamedElement("input","idsb1","submit1","submit"));
td1.appendChild(createNamedElement("hr","idhr1"));

alert(document.getElementById("idbt1").name);
alert(document.getElementById("idtb1").name);
alert(document.getElementById("idsb1").name);

function dosumthing(){
alert('x');
}

}

function createNamedElement(tag,id,name,type)
{
var element = null;
element = document.createElement(tag.toUpperCase());
if(id)
element.setAttribute("id", id);
if(tag.toUpperCase() == "INPUT")
element.setAttribute("type",type);
if(name)
element.setAttribute("name", name);
return element;
}
</script>

</head>
<body onload="init()">
<form name="frm1" action="whatever.php">
<div id="td1"></div>
</form>
</body></html>



if the names are a problem when
submitted to your php , the names
can be removed with onsubmit
handler.

jcobban
09-18-2011, 02:55 AM
or, more simply (and I believe better for cross-browser blah blah):


var editButton2 = document.createElement("input");
editButton2.name = 'your other button'+ rowNum;
editButton2.type = 'button';
editButton2.onclick= editCitation;
editButton2.value= "edit Citation 2";
td1.appendChild(editButton2);

When I do this the onclick is set but the name is not inserted into form.elements. I cannot imagine how M$ wrote the code so that fails, but that is how it behaves.

As I said, I can either set the name of the element or onclick, but nothing I have tried has permitted me to set both the name and the onclick attributes.

xelawho
09-18-2011, 03:06 AM
ok. how about this for the all-time test - makes a button then sets its rollover text by accessing the name attributes via form.elements?

(and works in IE/ & 8) :thumbsup:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>
<script type="text/javascript">
rowNum = 3;
var el;
function init(){



var td1 = document.getElementById("td1");
var editButton2 = document.createElement("input");
editButton2.name = 'your other button'+ rowNum;
editButton2.type = 'button';
editButton2.onclick= editCitation;
editButton2.value= "edit Citation 2";
td1.appendChild(editButton2);

el=document.forms[0].elements[0].form.elements;
for (var i = 0; i < document.forms[0].elements.length; i++) {
if (el[i].getAttribute('type') == 'button') {
el[i].title=el[i].name;
}
}

}

function editCitation(){
alert("it works!")
}

function getElements(){
for (var i = 0; i < document.forms[0].elements.length; i++) {
alert(el[i].name)
}
}

</script>
</head>
<body onload="init()">
<form>
<div id="td1"></div>
<input type="text" name="my text box" id="tbox"></input>
<input type="button" name="my button" value="get all elements" onclick="getElements()">
</form>
</body>
</html>

jcobban
09-18-2011, 07:19 PM
When I do this the onclick is set but the name is not inserted into form.elements. I cannot imagine how M$ wrote the code so that fails, but that is how it behaves.

As I said, I can either set the name of the element or onclick, but nothing I have tried has permitted me to set both the name and the onclick attributes.

I have tried to simplify the code and thrown individual try/catches around each spot where I try to set an attribute. Here is one chunk:



var button = document.createElement('BUTTON');
try {
button.name = 'editChild' + idir;
} catch(e) {
alert("editMarriages.js: addChildToPage: unable to set name for <button name='editChild" + idir + "'>");
}
try {
button.type = 'button';
} catch(e) { // this exception is caught
alert("editMarriages.js: addChildToPage: unable to set type for <button name='editChild" + idir + "'> type=" + button.type);
}
try {
button.onclick = editChild;
} catch(e) {
alert("editMarriages.js: addChildToPage: unable to set onclick for <button name='" + button.name + "'>");
}
button.appendChild(document.createTextNode('Edit Child'));
cell.appendChild(button);
row.appendChild(document.createTextNode("\n"));


Now I can set the name and the onclick handler, but an exception is thrown for setting type! I have not encountered this before except where the element had already been added into the DOM. Now aside from the exception being thrown the above code actually works. The appearance of the buttons is correct. The correct actions are taken when they are clicked on. When I interrogate the type in the catch for the type set it is 'button'. So all I have to do to get the code to work is comment out the alert. This is insane!

BTW if I change the createElement to create an INPUT element then the assignments to type, name, and onclick all work, but I am not permitted to append the text node onto the button so the button has no label! I am using a <button> rather than <input type='button'> because the former permits HTML in the label text definition. I support Alt key shortcuts for a lot of my buttons, so I want to be able to underline a letter in the button text.


var button = document.createElement('INPUT');
try {
button.name = 'editChild' + idir;
} catch(e) {
alert("editMarriages.js: addChildToPage: unable to set name for <button name='editChild" + idir + "'>");
}
try {
button.type = 'button';
} catch(e) {
alert("editMarriages.js: addChildToPage: unable to set type for <button name='editChild" + idir + "'>");
}
try {
button.onclick = editChild;
} catch(e) {
alert("editMarriages.js: addChildToPage: unable to set onclick for <button name='" + button.name + "'>");
}
try {
button.appendChild(document.createTextNode('Edit Child'));
} catch(e) {
alert("editMarriages.js: addChildToPage: unable to append text to <button name='" + button.name + "'>"); // this is displayed
}
try {
cell.appendChild(button);
} catch(e) {
alert("editMarriages.js: addChildToPage: unable to append <button name='" + button.name + "'> to cell " + tagToString(cell));
}
row.appendChild(document.createTextNode("\n"));

cell = row.appendChild(document.createElement('TD'));

xelawho
09-18-2011, 07:29 PM
of course you can't assign a type to a button.

a button already has a type: button.

that's why createElement("input") works.

don't create a text node for the button label - add it directly like this:
button.value= "Edit Child" + idir;


I am using a <button> rather than <input type='button'> because the former permits HTML in the label text definition. I support Alt key shortcuts for a lot of my buttons, so I want to be able to underline a letter in the button text.


sloooooowly the information comes out.

can't help you with that one, sorry. Maybe someone else has a workaround

DaveyErwin
09-18-2011, 08:13 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>

<script type="text/javascript">

function init(){
var td1 = document.getElementById("td1");
var myButton = createNamedElement("button","idbt1","button1")
myButton.onclick = dosumthing;
myButton.innerHTML = 'do<u>sumt</u>hing';
td1.appendChild(myButton);
td1.appendChild(createNamedElement("input","idtb1","textbox1","text"));
td1.appendChild(createNamedElement("input","idsb1","submit1","submit"));
td1.appendChild(createNamedElement("hr","idhr1"));

alert(document.getElementById("idbt1").name);
alert(document.getElementById("idtb1").name);
alert(document.getElementById("idsb1").name);

function dosumthing(){
alert('x');
}

}

function createNamedElement(tag,id,name,type)
{
var element = null;
element = document.createElement(tag.toUpperCase());
if(id)
element.setAttribute("id", id);
if(tag.toUpperCase() == "INPUT")
element.setAttribute("type",type);
if(name)
element.setAttribute("name", name);
return element;
}
</script>

</head>
<body onload="init()">
<form name="frm1" action="whatever.php">
<div id="td1"></div>
</form>
</body></html>

DaveyErwin
09-18-2011, 08:49 PM
sloooooowly the information comes out.



:Dsloooooowly:p

jcobban
09-19-2011, 04:48 PM
of course you can't assign a type to a button.

a button already has a type: button.



According to the HTML 4.01 specification (which is what IE7 supports) a <button> can have one of three types: button, submit, reset and the default is submit. The HTML 5 specification says the same thing, only it takes a page of text to describe it. Since I do not want to create submit buttons I at least theoretically need to be able to set the type to button.

blaze4218
09-19-2011, 05:14 PM
if you don't have a form and don't specify type='button' within the <button> tag your output can be a little wonky. so I dissagree that

of course you can't assign a type to a button.

a button already has a type: button.

xelawho
09-19-2011, 05:37 PM
ok... I retract that. I don't really know anyway. But it seems to me to be the logical explanation why



var editButton2 = document.createElement("button");
editButton2.type = 'button';

would fail...

whereas



var editButton2 = document.createElement("input");
editButton2.type = 'button';

would work

and (I suspect)



var editButton2 = document.createElement("input");
editButton2.type = 'submit';

would also work

whereas



var editButton2 = document.createElement("button");
editButton2.type = 'submit';

would probably fail

but that's just me, supposing...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum