javascript - How do I keep my ul element from disappearing when it is clicked? -
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>javascript events</title <style> ul { margin:0px auto; width:700px; height:600px; position:relative; cursor:pointer; border:black;*/ } li { width:200px; height:200px; background:black; display:inline-block; } #red { background:red; } #green{ background:green; } #blue { background:blue; } #orange{ background:orange; } #purple{ background:purple; } #pink { background:pink; } #silver { background:silver; } #gold{ background:gold; } #black { background:black; } </style> </head> <body> <ul id="grid"> <li alt="red1" class="red" id='red' ></li> <a href="http://www.google.com"><li id="orange"></li></a> <li id="silver"></li> <li alt="green machine" id="green"></li> <li id="gold"></li> <li id="purple"></li> <li id="pink" alt="pink"></li> <li id="blue"></li> <li id="black"></li> </ul> here's problem is //waits until document loads window.onload = function(){ stupid red box says have code, sooo irksome!
//handler ul element
var donut = document.queryselector('#grid');
donut.addeventlistener('click',function(e){ //prevents href e.preventdefault(); **how stop selecting ul tag** //stops deleting squares var howmany = this.queryselectorall('li').length; if (howmany > 1 ) { console.log(e); var removetarget = e.target; removetarget.remove(e.target); } } , false); /*var tomato = document.getelementbyid('grid') tomato.addeventlistener('click', function(e){ console.log("clicked inside ul"); e.preventdefault();} , false);*/ /*var nachos = document.getelementbyid('pink') nachos.addeventlistener('click', function(e) { console.log(e.toelement); e.stoppropagation(); } , false);*/ } </script> </body> </html>
var donut = document.queryselector('#grid'); donut.addeventlistener('click', function (e) { e.preventdefault(); if (e.target.tagname === 'li') { e.target.remove(); } } , false);
Comments
Post a Comment