javascript - GetElementsByClassName - can't write the function to use the returned array -
i have posted already, think question poorly explained. have multiple divs class of "popupedit".
want able target these using getelementsbyclassname.....the result being popup input field. see code below.
i know getelementsbyclassname returns array of elements class editquestion, have failed write function works use array. lack of skill (i'm newbie).
could give me solution have can study. apologies asking directly answer...i have tried numerous things without success.
many thanks
html
<button class="editquestion">edit</button> <div class="overlay2"></div> <div class="popupedit"> <h2>edit question, input box here..</h2> <button class="closebtn2">close</button> </div> js
window.onload = function () { document.getelementsbyclassname("editquestion").onclick = function () { var overlay2 = document.getelementsbyclassname("overlay2"); var popupedit = document.getelementsbyclassname("popupedit"); overlay2.style.display = "block"; popupedit.style.display = "block"; }; document.getelementsbyclassname("closebtn2").onclick = function () { var overlay2 = document.getelementsbyclassname("overlay2"); var popupedit = document.getelementsbyclassname("popupedit"); overlay2.style.display = "none"; popupedit.style.display = "none"; }; }; css
button.editquestion{ padding: 0; border: none; background: none; color:#a8a8a8; font-weight: bold; } button.closebtn2 { padding: 0; border: none; background: none; position:absolute; right:10px; top:5px; } .popupedit { display:none; position:fixed; left:40%; top:30%; width:600px; height:150px; margin-top:-75px; margin-left:-150px; background:#ffffff; border:1px solid #000; z-index:100000; } .overlay2 { display:none; position:fixed; left:0px; top:0px; width:100%; height:100%; background:#000; opacity:0.5; z-index:99999; } edited version - have tried use queryselectorall suggested tj crowder....the queryselector works, when add in loop , change queryselectorall fails....any suggestions
window.onload = function () { document.queryselectorall(".editquestion").onclick = function () { var overlay2 = document.queryselectorall(".overlay2"); var popupedit = document.queryselectorall(".popupedit"); var index; (index = 0; index < overlay2.length; ++index) { overlay2[index].style.display = "none"; popupedit[index].style.display = "block"; } }; document.queryselectorall(".closebtn2").onclick = function () { var overlay2 = document.queryselectorall(".overlay2"); var popupedit = document.queryselectorall(".popupedit"); var index; (index = 0; index < overlay2.length; ++index) { overlay2[index].style.display = "none"; popupedit[index].style.display = "block"; } }; };
getelementsbyclassname (on browsers exists) returns list, not single element. line , similar:
overlay2.style.display = "none"; ...fails, because list doesn't have style property.
if want handle first match, can grab via [0]:
overlay2[0].style.display = "none"; (that fail if there no matches, though.) or, since getelementsbyclassname isn't well-supported queryselector, might prefer:
overlay2 = document.queryselector(".overlay2"); // gives first match; note dot overlay2.style.display = "none"; or if want loop through of them, need loop:
var index; (index = 0; index < overlay2.length; ++index) { overlay2[index].style.display = "none"; } to list loop, either use getelementsbyclassname (but won't work on ie8), or use queryselectorall (which will):
overlay2 = document.queryselectorall(".overlay2"); // gives list could show me how incorporate loop js function.
i don't think want loop; want handle specific overlay , popup related button, right?
i'd change html each group has group div or similar around it:
<div class="question"><!-- wrapper div each question --> <button class="editquestion">edit</button> <div class="overlay2" style="display: none"></div><!-- note i've hidden ... --> <div class="popupedit" style="display: none"> <!-- ...these default --> <h2>edit question, input box here..</h2> <button class="closebtn2">close</button> </div> </div> ...and use event delegation:
var container = document.getelementbyid("questions"); hookevent(container, "click", function(event) { var button, group, overlay, display; // find button clicked, if button = event.target; while (button && ( button.tagname.touppercase() !== "button" || !button.classname.match(/\beditquestion\b|\bclosebtn2\b/) )) { button = button.parentnode; } if (button) { // 1 of our desired buttons clicked, find parent group = button.parentnode; while (group && !group.classname.match(/\bquestion\b/)) { group = group.parentnode; } if (group) { overlay = group.queryselector(".overlay2"); display = overlay.style.display === "block" ? "none" : "block"; overlay.style.display = display; group.queryselector(".popupedit").style.display = display; } } }); ...where hookevent looks this:
function hookevent(element, eventname, handler) { if (element.addeventlistener) { element.addeventlistener(eventname, handler, false); } else if (element.attachevent) { element.attachevent("on" + eventname, function(event) { var e = event || window.event; if (!e.target) { e.target = e.srcelement; } handler.call(element, e); }); } else { throw "addeventlistener or attachevent required"; } } the great thing event delegation since you're handling event on container, doesn't matter how add or remove questions in container, keeps working.
a lot of code above deal ie weirdness, , handle event delegation. fwiw, dom library can make lot simpler you. here's jquery example:
$("selector container").on("click", ".editbutton, .closebtn2", function() { var button = $(this); button.closest('.question').find(".overlay2, .popupedit").toggle(button.is(".editbutton")); });
Comments
Post a Comment