Question

151

HTML changes with element.setAttribute(onclick,alert('Test');) and element.onclick = alert('Test');;

rated 0 times [ 155] [ 4] / answers: 1 / hits: 19045 / 15 Years ago, tue, february 9, 2010, 12:00:00

I got surprised when comparing the following cases:

button = document.getElementById(addSugerenciaButton);



if (button != null) {

   button.onclick = post_to_url(' + addSugerenciaURL + ', idBuzon', ' + id + ');;

}



button = document.getElementById(removeBuzonButton);



if (button != null) {

    button.onclick = function() {

        if (!confirm(removeSugerenciaMessage)) {

            return false; 

        };

        post_to_url(removeBuzonURL, 'idBuzon', id);

    };

}



button = document.getElementById(editBuzonButton);



if (button != null) {

    button.setAttribute(onclick,post_to_url(' + editBuzonURL + ', 'idBuzon', ' + id + '););

}

Just the latter appeared to change the HTML (at least inspecting with Firebug) whilst the rest, although working properly too, they didn't show any onclick event in the editBuzonButton element.

Any ideas why this is happening?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tayaw

Add To Favorites

Follow

Total Points: 749

Total Questions: 88

Total Answers: 86

Location: Djibouti

Member since Sun, Feb 27, 2022

2 Years ago

tayaw questions

1 How to enable cache for getServerSideProps?

Thu, Mar 3, 22, 00:00, 2 Years ago

1 navigator.clipboard.readText() is not working in Firefox

Fri, May 7, 21, 00:00, 3 Years ago

1 Vuetify form .$refs validate is not a function

Wed, Oct 7, 20, 00:00, 4 Years ago

1 Using absolute position to place image above another image using Tailwind CSS

Sun, Sep 6, 20, 00:00, 4 Years ago

1 How to make div tag clickable with Link from react-router-dom?

Wed, Jun 17, 20, 00:00, 4 Years ago

View All

answered 15 Years ago luzv · Accepted Answer

Yes. setAttribute adds an attribute to an Element DOM node. For the onclick attribute, there is a side effect under the covers of also adding an onclick event handler, which is made by 'compiling' the attribute value into a javascript function.

Assigning a function to the onclick property of the element directly does attach the handler, but does not automatically add an attribute to the DOM node.

Now it is possible that there are browsers that do not make the distinction between adding the attribute and attaching the handler directy. But keep in mind that although modifying the document may create scriptable objects as side effect, the reverse does not have to be the case: programmatically creating DOM structures may or may not change the HTML underlying the document according to the browser you happen to be using.