JavaScript/DOM: Can't set onclick-attribute for <a>'-tags in IE

R

Reinhold Schrecker

Hi there,

I am trying to generate a dynamic menu with JavaScript/DOM and have
problems to set the onclick-attribute for my <a>-elements.

The following code works fine in Opera and Mozilla but does not work in
IE:

<!--snip-->
<script language="JavaScript">
<!-- //

var topArray = new Array();

var j = topArray.length;
topArray[j] = new Object();
topArray[j]["id"] = "funktion_466";
topArray[j]["class"] = "top-function";
topArray[j]["a_id"] = "466";
topArray[j]["a_class"] = "menu-left-tab";
topArray[j]["a_onclick"] = "
top.open('wrap_action_frame?setup_dynamic_frame%3Fpar_session=1676053637&par_session=1676053637',
'dynamic1676053637'); return false;";
topArray[j]["a_text"] = "Search";


var myCurrentElement;
var myNewElement;
var myNewChildElement;
var myNewChildText;




function buildMenu(parameter)
{
myCurrentElement = window.document.getElementById('topmenu');
for (var i = 0; i < topArray.length; i++)
{
myNewElement = window.document.createElement('div');
myNewElement.className = topArray["class"];
myNewElement.setAttribute('id', topArray["id"]);

myNewChildElement = window.document.createElement('a');
myNewChildElement.setAttribute('id', topArray["a_id"]);
myNewChildElement.className = topArray["a_class"];


myNewChildElement.setAttribute('href', topArray["href"]);
myNewChildElement.setAttribute('target', topArray["target"]);

myNewChildElement.setAttribute(''onClick'',
topArray["a_onclick"]);
}
}
buildMenu();
// -->
</script>
<!--snip-->

Regards
Reinhold
 
M

Martin Honnen

Reinhold Schrecker wrote:

I am trying to generate a dynamic menu with JavaScript/DOM and have
problems to set the onclick-attribute for my <a>-elements.
Click to expand...

With the HTML DOM don't use the setAttribute method, it works very
differently in IE compared to other browsers, you can simply assign to
element object properties instead e.g.
element.id = 'someId';
element.onclick = someJavaScriptFunction;
or in your case you like want e.g.
element.onclick = new Function ("evt", topArray[j]["a_onclick"]);
 
R

Reinhold Schrecker

or in your case you like want e.g.
element.onclick = new Function ("evt", topArray[j]["a_onclick"]);
Click to expand...

....works fine.

Thanks a lot for your fast support.
Reinhold
 
V

VK

Martin said:
Reinhold Schrecker wrote:

I am trying to generate a dynamic menu with JavaScript/DOM and have
problems to set the onclick-attribute for my <a>-elements.
Click to expand...

With the HTML DOM don't use the setAttribute method, it works very
differently in IE compared to other browsers, you can simply assign to
element object properties instead e.g.
element.id = 'someId';
element.onclick = someJavaScriptFunction;
or in your case you like want e.g.
element.onclick = new Function ("evt", topArray[j]["a_onclick"]);
Click to expand...

As an addon: not to correct the solution (it doesn't need to) but to
clarify the situation with setAttribute/removeAttribute methods, as it
gives an impression of IE doing ("once again" :) something wrong.

setAttribute/removeAttribute are methods to operate with the element
nodes (as reflected in the DOM Tree), not with DOM interface (as
provided to the script engine). This they have a rather narrow
application domain: when you need to change the DOM Tree itself (say if
you are preparing it for a tree walker). Respectively setAttribute
takes its argument as a plain vanilla text string and just add it as
nodeValue to the tree. It doesn't and it shouldn't to anyhow parse it,
DOM specs are very clear on it. So the way some browsers do allow you
to assign intrinsic handlers this way (over setAttribute) is little
convenience cheet-chat on specs. I personally welcome it (as any extra
convenience) but officially they shouldn't do it.

In the sample below you can click on "Test" to see that the dynamic
link indeed has attribute "ONCLICK" with value "alert('OK')" - but this
is just an attribute (not a handler) with /text/ value (not JScript
code).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function demo(){
var p = document.createElement('P');
var a = document.createElement('A');
a.innerHTML = '<b>Click me</b>';
a.id = 'a01';
a.href = '#';
p.appendChild(a);
document.body.appendChild(p);
a.setAttribute('onclick', "alert('OK')");
}

window.onload = demo;
</script>
</head>

<body>
<p style="cursor:pointer"
onclick="alert(document.getElementById('a01').getAttribute('ONCLICK'))">
Test</p>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Pulldown-menu created with JavaScript/DOM; Wrong width in IE 2
How to change star rating color on mouseenter, on mouseout, and on onclick 0
Multi select options in a menu 1
Opera - Problem determening the selectedIndex via JavaScript/DOM 2
Javascript scroll to sections and also scroll to section but open relevant nav-tab 4
IE setAttributeNode "onclick" with JavaScript 1
onclick and DOM in parent window problem 4
Only one table shows up with the information 2

Members online

No members online now.
Total: 44 (members: 0, guests: 44)
Robots: 225

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top