Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    IE set onclick Object doesn't support this action

    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:
    Code:
    	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.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    can you post a little more code?

    how are you defining editButton, for example?

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    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">
    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 ?
    Last edited by DaveyErwin; 09-15-2011 at 10:15 PM.

  • #4
    New Coder
    Join Date
    Mar 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    can you post a little more code?

    how are you defining editButton, for example?
    The code to create and initialize the button is:
    Code:
    	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:
    Code:
    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:
    Code:
    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

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Let's discuss this code.


    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>
    --------------------------------------------------------------------------------
    Last edited by DaveyErwin; 09-16-2011 at 03:36 AM.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    works better for me like 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 = 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>
    Last edited by xelawho; 09-16-2011 at 05:35 AM.

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Quote Originally Posted by xelawho View Post
    works better for me like this:
    Yeah , that was a needless line alright

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Quote Originally Posted by DaveyErwin
    Yeah , that was a needless line alright
    aw. I thought we were having a discussion.

    Aren't we trying to make a button here?

  • #9
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    well uh

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

    makes a very nice button

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Quote Originally Posted by DaveyErwin View Post
    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...

    Code:
    <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>

  • #11
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Yeah i dont get the kludge stuff ?

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

    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 = 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 ...

    Quote Originally Posted by Kor View Post
    IE does not like to change dynamically the type
    Last edited by DaveyErwin; 09-16-2011 at 05:20 AM.

  • #12
    New Coder
    Join Date
    Mar 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DaveyErwin View Post
    Yeah i dont get the kludge stuff ?

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

    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 = 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.

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    ah, I get the problem now.

    have you tried setting the attributes?

    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 = 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
    Last edited by xelawho; 09-16-2011 at 07:57 PM.

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    or, more simply (and I believe better for cross-browser blah blah):

    Code:
    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);

  • #15
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    never mind !


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •