onclick method ERROR
The following is the code am using to create on click method. I am getting an error when I click, nothing happens and I don\'t know what is wrong.
-
"Don't Repeat Yourself."
You don't need 12 separate functions to cover every single element. This duplicates code and makes it harder to troubleshoot (as you saw), and harder to maintain. You'd have to add new functions for every new item category!
Instead, you can add event listeners to each of the menu
<li>tags in a loop. Here you can also give your<li>elements unique IDs or a class. In HTML5 you can add customdata-attributes as well.(function addEventListeners(){ //Give the <ul> an ID instead of a class to target only those <li> elements. var menuItems = document.getElementById("cbp-vimenu").getElementsByTagName("li"); var len = menuItems.length; for (var i=0; i < len; i++){ menuItems[i].addEventListener("click", showMenu); menuItems[i].setAttribute("id", "menuItem" + i); menuItems[i].setAttribute("data-itemNum", i); } })();Then create a single
showMenu()function that compares the clicked<li>to the div you want to show. You could use a switch-case approach, or if the list and the divs are in the same order you can match them numerically (Ex: the 3rd menu item -> the 3rd sub-menu div). Either option really cuts down the code, which makes things less repetitive & easier to troubleshoot.Option 1, switch-case (JSFiddle):
function showMenu(){ hidemenus(); var selectedItem = this.id; var divID; switch (selectedItem){ case "menuItem1": divID = "mobi"; break; case "menuItem2": divID = "elec"; break; //add more cases here to account for other items default: return false; } document.getElementById(divID).style.display = "block"; };Option 2, match list item and div position in array of matching elements (JSFiddle):
function showMenu(){ hidemenus(); var itemNum = this.getAttribute("data-itemNum"); var menuDivs = document.getElementsByClassName("answer_list"); menuDivs[itemNum].style.display = "block"; };Your
hidemenus()function can be simplified by targeting theclass="answer_list"attribute instead:function hidemenus() { var menusToHide = document.getElementsByClassName("answer_list"); var len = menusToHide.length; for (var i = 0; i < len; i++){ menusToHide[i].style.display = "none"; } };BTW, you don't need to use nested
<a>tags if all you're doing is changing CSS. You can put a click event listener on any element, and use CSS for the hand cursor to indicate that it's clickable.li:hover{ cursor: pointer; cursor: hand; /*outdated cross-browser option, but no harm including it*/ }Also, try to avoid inline CSS and inline JavaScript like
onClick()- it can be much harder to maintain. As you can tell, it's hard to troubleshoot this code, and if you want to change its functionality, you'd need to edit 20+ locations in HTML vs maybe 2 in external JS.Ok, really last note - your HTML is missing some closing tags,
</html>, a closing</p>tag in the "mobile" section, etc. Run it through an HTML validator.讨论(0) -
made some edits check this it will work now
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <title>Blueprint: Vertical Icon Menu</title> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/leftmenu.css" /> <link rel="stylesheet" type="text/css" href="flaticon.css" /> <style> body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;} body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;} a {text-decoration: none;} a:hover {color: #000;} #header{height:20%;width: 100%;background-color: #B9F5BB;} .dis123{width:75%;float:left; height:80%;text-align: left; } .postleftmen{width:25%;float:left;color:#f0f0f0;} div.subcte456{text-align: inherit;line-height: 150%;font-size:20px} div .subcte456 a{display:inline-block;padding:2px 6px;background-color:#47a3da;color:white;border-radius:4px;margin:3px;cursor:default;} </style> </head> <body> <div id="header"> Head </div> <div class="postleftmen"> <ul class="cbp-vimenu"> <li><a href="#" class="flaticon-number41" > select category</a></li> <li><a href="#" class="flaticon-smart" onClick="mob(); return false;"> mobile</a></li> <li><a href="#" class="flaticon-pc6" onClick="ele(); return false;"> electronics & computer</a></li> <li><a href="#" class="flaticon-car95" onClick="veh(); return false;"> vehicle</a></li> <li><a href="#" class="flaticon-livingroom6" onClick="hme(); return false;"> home & furniture</a></li> <li><a href="#" class="flaticon-dog37" onClick="pet(); return false;"> pets</a></li> <li><a href="#" class="flaticon-cd" onClick="bok(); return false;"> books, cd & hobbies</a></li> <li><a href="#" class="flaticon-black276" onClick="clo(); return false;"> clothing & accessories</a></li> <li><a href="#" class="flaticon-baby23" onClick="kid(); return false;"> kids & baby</a></li> <li><a href="#" class="flaticon-bicycle14" onClick="spo(); return false;"> sport & health</a></li> <li><a href="#" class="flaticon-tools6" onClick="ser(); return false;"> service</a></li> <li><a href="#" class="flaticon-businessman221" onClick="job(); return false;"> jobs</a></li> <li><a href="#" class="flaticon-house111" onClick="est(); return false;"> real estate</a></li> </ul> </div> <div class="dis123" style="text-transform: uppercase;"> <div class="stepindi" style="width:400px;height:10px;"> <p class="flaticon-number40" style="font-size:25px;"> SELECT YOUR FORM TYPE</p> </div> <div class="subcte456" style="font-size: 15px;position:fixed;width:55%;height:30%;margin-top: 30px;margin-left: 150px;"> <div id="mobi" style="display:none;z-index:99;" class="answer_list" > <p class="flaticon-right127"><a href="#">Mobile Phones</a> <p class="flaticon-right127"><a href="#">Tablets</a></p> <p class="flaticon-right127"><a href="#">Mobile Accessories</a></p></div> <div id="elec" style="display:none;z-index:99;" class="answer_list" > <p class="flaticon-right127"><a href="#">Cameras & Accessories</a></p> <p class="flaticon-right127"><a href="#">TV - Video - Audio</a></p> <p class="flaticon-right127"><a href="#">Computers - Laptops</a></p> <p class="flaticon-right127"><a href="#">Computer Accessories</a></p> <p class="flaticon-right127"><a href="#">Video Games - Consoles</a></p> <p class="flaticon-right127"><a href="#">Others Electronics</a></p></div> <div id="vehi" style="display:none;z-index:99;" class="answer_list" > <p class="flaticon-right127"><a href="#">Cars</a></p> <p class="flaticon-right127"><a href="#">Motorcycles - Scooters</a></p> <p class="flaticon-right127"><a href="#">Bicycles</a></p> <p class="flaticon-right127"><a href="#">Commercial - Transportation</a></p> <p class="flaticon-right127"><a href="#">Spare Parts - Accessories</a></p> <p class="flaticon-right127"><a href="#">Tractors - Agricultural Equipments </a></p></div> <div id="home" style="display:none;z-index:99;" class="answer_list" > <p class="flaticon-right127"><a href="#">Furniture</a></p> <p class="flaticon-right127"><a href="#">Decor & Furnishings</a></p> <p class="flaticon-right127"><a href="#">Fridge - AC - Washing Machine</a></p> <p class="flaticon-right127"><a href="#">Home & Kitchen Appliances</a></p> <p class="flaticon-right127"><a href="#">Art - Paintings</a></p> <p class="flaticon-right127"><a href="#">Other Household Goods</a></p></div> <div id="pets" style="display:none;z-index:99;" class="answer_list" > <p class="flaticon-right127"><a href="#">Animals</a></p> <p class="flaticon-right127"><a href="#">Pet Food - Accessories</a></p> <p class="flaticon-right127"><a href="#">Pet Care & Services</a></p></div> <div id="book" style="display:none;z-index:99;" class="answer_list" > <p class="flaticon-right127"><a href="#">Books & Magazines</a></p> <p class="flaticon-right127"><a href="#">CDs - DVDs</a></p> <p class="flaticon-right127"><a href="#">Musical Instruments</a></p> <p class="flaticon-right127"><a href="#">Coins & Collectibles</a></p> <p class="flaticon-right127"><a href="#">Handicrafts</a></p></div> <div id="clot" style="display:none;z-index:99;" class="answer_list" > <p class="flaticon-right127"><a href="#">Clothes</a></p> <p class="flaticon-right127"><a href="#">Jewellery</a></p> <p class="flaticon-right127"><a href="#">Bags & Luggage</a></p> <p class="flaticon-right127"><a href="#">Footwear</a></p> <p class="flaticon-right127"><a href="#">Clothing Accessories</a></p> <p class="flaticon-right127"><a href="#">Watches</a></p></div> <div id="kids" style="display:none;z-index:99;" class="answer_list" > <p class="flaticon-right127"><a href="#">Baby Products & Furniture</a></p> <p class="flaticon-right127"><a href="#">Kids Clothing - Accessories</a></p> <p class="flaticon-right127"><a href="#">Toys & Games</a></p> <p class="flaticon-right127"><a href="#">Kids Health - Nutrition</a></p></div> <div id="spor" style="display:none;z-index:99;" class="answer_list" > <p class="flaticon-right127"><a href="#">Sport Equipment</a></p> <p class="flaticon-right127"><a href="#">Gym & Fitness</a></p> <p class="flaticon-right127"><a href="#">Health & Beauty</a></p></div> <div id="serv" style="display:none;z-index:99;" class="answer_list" > <p class="flaticon-right127"><a href="#">Education & Classes</a></p> <p class="flaticon-right127"><a href="#">Electronics - Computers</a></p> <p class="flaticon-right127"><a href="#">Maids & Domestic Help</a></p> <p class="flaticon-right127"><a href="#">Health & Beauty</a></p> <p class="flaticon-right127"><a href="#">Home Improvements & Repairs</a></p> <p class="flaticon-right127"><a href="#">Movers & Packers</a></p> <p class="flaticon-right127"><a href="#">Drivers - Taxi Services</a></p> <p class="flaticon-right127"><a href="#">Car Wash & Repair</a></p> <p class="flaticon-right127"><a href="#">Other Services</a></p></div> <div id="jobs" style="display:none;z-index:99;" class="answer_list" > <p class="flaticon-right127"><a href="#">Job Offers</a></p> <p class="flaticon-right127"><a href="#">Resumes</a></p></div> <div id="real" style="display:none;z-index:99;" class="answer_list" > <p class="flaticon-right127"><a href="#">Houses - Apartments for Sale</a></p> <p class="flaticon-right127"><a href="#">Houses - Apartments for Rent</a></p> <p class="flaticon-right127"><a href="#">Land - Plots For Sale</a></p> <p class="flaticon-right127"><a href="#">Office – Commercial Space</a></p> <p class="flaticon-right127"><a href="#">PG & Roommates</a></p> <p class="flaticon-right127"><a href="#">Vacation Rentals – Guest Houses</a></p></div> </div></div> <div style="clear:both"> </div> <script> function mob() { hidemenus(); document.getElementById('mobi').style.display = "block"; } function ele() { hidemenus(); document.getElementById('elec').style.display = "block"; } function veh() { hidemenus(); document.getElementById('vehi').style.display = "block"; } function hme() { hidemenus(); document.getElementById('home').style.display = "block"; } function pet() { hidemenus(); document.getElementById('pets').style.display = "block"; } function bok() { hidemenus(); document.getElementById('book').style.display = "block"; } function clo() { hidemenus(); document.getElementById('clot').style.display = "block"; } function kid() { hidemenus(); document.getElementById('kids').style.display = "block"; } function spo() { hidemenus(); document.getElementById('spor').style.display = "block"; } function ser() { hidemenus(); document.getElementById('serv').style.display = "block"; } function job() { hidemenus(); document.getElementById('jobs').style.display = "block"; } function est() { hidemenus(); document.getElementById('real').style.display = "block"; } function hidemenus() { document.getElementById('mobi').style.display = "none"; document.getElementById('elec').style.display = "none"; document.getElementById('vehi').style.display = "none"; document.getElementById('home').style.display = "none"; document.getElementById('pets').style.display = "none"; document.getElementById('book').style.display = "none"; document.getElementById('clot').style.display = "none"; document.getElementById('kids').style.display = "none"; document.getElementById('spor').style.display = "none"; document.getElementById('serv').style.display = "none"; document.getElementById('jobs').style.display = "none"; document.getElementById('real').style.display = "none"; } </script>javascript html
讨论(0)
加载中...
- 热议问题