JavaScript, DOM, creating dynamic events
Question
<html> <div id="menuID" style="visibility:hidden"> <menuItems numItems="2"> <items nname="Site Menu" numItems="3"> <item> <mname>What's New</mname> <mvalue>http://yahoo.com</mvalue> </item> <item> <mname>What's Hot</mname> <mvalue>some URL</mvalue> </item> <item> <mname>Revised Scripts</mname> <mvalue>http://cnn.com/</mvalue> </item> </items> <items nname="FAQ Help" numItems="3"> <item> <mname>Usage Terms</mname> <mvalue>some URL</mvalue> </item> <item> <mname>DHTML FAQs</mname> <mvalue>some URL</mvalue> </item> <item> <mname>Scripts FAQs</mname> <mvalue>some URL</mvalue> </item> </items> </menuItems> </div> <head> <script type="text/javascript"> function parse() { var root = document.getElementById("menuID"); for (i = 0; i < root.childNodes.length; i++) for (i = 0; i < root.childNodes.length; i++) if (root.childNodes[i].nodeName.toLowerCase() == 'menuitems') { var aNode = root.childNodes[i]; for (j = 0; j < aNode.childNodes.length; j++) if (aNode.childNodes[j].nodeName.toLowerCase() == 'items') { var heading = document.createElement("div"); root.appendChild(heading); heading.innerHTML = aNode.childNodes[j].getAttribute("nname"); heading.style.visibility = "visible"; heading.setAttribute('id', heading.innerHTML) //Create lists for each heading var uList = document.createElement("menu"); uList.setAttribute('type', "list"); heading.appendChild(uList); var uListID = heading.getAttribute('id') + j; uList.setAttribute('id', uListID); //document.write("ab " + uList.id + '<br>'); uList.style.display = 'none'; //uList.onmouseover = display(this.id); uList.setAttribute('onclick', 'display(this.id)'); var bNode = aNode.childNodes[j]; for (k = 0; k < bNode.childNodes.length; k++) if (bNode.childNodes[k].nodeName.toLowerCase() == 'item') { var cNode = bNode.childNodes[k]; var list = document.createElement("li"); uList.appendChild(list); var lnk = document.createElement("a"); for (l = 0; l < cNode.childNodes.length; l++) { if (cNode.childNodes[l].nodeName.toLowerCase() == "mname") { var hContent = cNode.childNodes[l].innerHTML; lnk.innerHTML = hContent; } else if (cNode.childNodes[l].nodeName.toLowerCase() == "mvalue") { var hURL = cNode.childNodes[l].innerHTML; lnk.setAttribute("href", hURL); } } list.appendChild(lnk); } } } } </script> </head> <body onLoad="parse();"> </body> <script> function display(listID) { var thisList = document.getElementById(listID); if (thisList.style.display = 'none') { (thisList).style.display = 'block'; } } </script> </html>
I'm working on a JavaScript / HTML project where I need to create a collapsible menu. The menu needs to be created dynamically using DOM walking. I have the script working to create the menu, but I'm having issues making it collapsible. I can't figure out how to dynamically pass the newly created ids of menu headings to the onmousevent attribute of each menu heading that is created.
I have tried:
uList.onmouseover = display(ulist.getAttribute('id0));
uList.setAttribute('onmouseclick', 'display(this.id)');
where uList is the tag being dynamically created and display is the function which determines wether the the menu is collapsed or not
function display(listID)
{
var thisList = listID;
if(thisList.style.display = 'none')
(
(thisList).style.display = 'block';
)
}
The browser keeps giving me this error:
Unable to set property 'display' of undefined or null reference
2 answers
solution1
0 2014-10-03 03:11:30
If you have an ID, you need to call getElementById() to get the DOM element:
var thisList = getElementById(listID);
Alternatively, instead of passing the ID to the function, you can pass the element itself:
uList.setAttribute('onclick', 'display(this)');
Better would be to write it in more modern style:
ulist.addEventListener('click', function() {
display(this);
});
solution2
0 2014-10-03 03:14:32
Try this, you make a mistake in if syntax, it's not using () but {}.
function display(listID)
{
var thisList = listID;
if($('#'+thisList).css('display') == 'none'){
$('#'+thisList).css('display','block');
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.