javascript - eventListener to be added to parent, but child element interfering -
i trying create calculator, , want on clicking whole key/button, number appears on screen. if click in h1 region of key/button, output undefined. understand problem, try click key/button on white area , on blue area. how can fix ?
var evt = document.queryselectorall(".evt"); var screentext = document.getelementbyid("screentext"); var show = function(e) { screentext.innerhtml += e.srcelement.firstchild.innerhtml; } for(var = 0 ; < 14 ; i++) { evt[i].addeventlistener("click", show); }#calcbody { width: 400px; height: 500px; border: 2px solid black; } #screen { width: 90%; height: 15%; border: 1px groove black; margin: 5%; text-align: right; } .flt { float: left; width: 20%; height: 17%; border: 1px solid black; box-sizing: border-box; margin-left: 4%; margin-bottom: 2%; position: relative; } .flt2 { float: left; border: 1px solid black; box-sizing: border-box; width: 44%; height: 17%; margin-left: 4%; position: relative; } .keys { text-align: center; padding-top: 2px; background-color: skyblue; }<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div id="calcbody"> <div id="screen"><h1 id="screentext"></h1></div> <div id="num1" class="flt evt"><h1 class="keys">1</h1></div> <div id="num2" class="flt evt"><h1 class="keys">2</h1></div> <div id="num3" class="flt evt"><h1 class="keys">3</h1></div> <div id="num4" class="flt evt"><h1 class="keys">4</h1></div> <div id="num5" class="flt evt"><h1 class="keys">5</h1></div> <div id="num6" class="flt evt"><h1 class="keys">6</h1></div> <div id="num7" class="flt evt"><h1 class="keys">7</h1></div> <div id="num8" class="flt evt"><h1 class="keys">8</h1></div> <div id="num9" class="flt evt"><h1 class="keys">9</h1></div> <div id="num0" class="flt evt"><h1 class="keys">0</h1></div> <div id="plus" class="flt evt"><h1 class="keys">+</h1></div> <div id="minus" class="flt evt"><h1 class="keys">-</h1></div> <div id="multiply" class="flt2 evt"><h1 class="keys">*</h1></div> <div id="divide" class="flt2 evt"><h1 class="keys">/</h1></div> </div> </body> <script src="script.js"></script> </html>
you can change screentext.innerhtml += e.srcelement.firstchild.innerhtml; screentext.innerhtml += e.currenttarget.innertext;
currenttarget refers element event bound to, , not element clicked on. in case, though user clicked on <h1> element, event bubbled container div, element we'd reference here.
var evt = document.queryselectorall(".evt"); var screentext = document.getelementbyid("screentext"); var show = function(e) { screentext.innerhtml += e.currenttarget.innertext; } for(var = 0 ; < 14 ; i++) { evt[i].addeventlistener("click", show); }#calcbody { width: 400px; height: 500px; border: 2px solid black; } #screen { width: 90%; height: 15%; border: 1px groove black; margin: 5%; text-align: right; } .flt { float: left; width: 20%; height: 17%; border: 1px solid black; box-sizing: border-box; margin-left: 4%; margin-bottom: 2%; position: relative; } .flt2 { float: left; border: 1px solid black; box-sizing: border-box; width: 44%; height: 17%; margin-left: 4%; position: relative; } .keys { text-align: center; padding-top: 2px; background-color: skyblue; }<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div id="calcbody"> <div id="screen"><h1 id="screentext"></h1></div> <div id="num1" class="flt evt"><h1 class="keys">1</h1></div> <div id="num2" class="flt evt"><h1 class="keys">2</h1></div> <div id="num3" class="flt evt"><h1 class="keys">3</h1></div> <div id="num4" class="flt evt"><h1 class="keys">4</h1></div> <div id="num5" class="flt evt"><h1 class="keys">5</h1></div> <div id="num6" class="flt evt"><h1 class="keys">6</h1></div> <div id="num7" class="flt evt"><h1 class="keys">7</h1></div> <div id="num8" class="flt evt"><h1 class="keys">8</h1></div> <div id="num9" class="flt evt"><h1 class="keys">9</h1></div> <div id="num0" class="flt evt"><h1 class="keys">0</h1></div> <div id="plus" class="flt evt"><h1 class="keys">+</h1></div> <div id="minus" class="flt evt"><h1 class="keys">-</h1></div> <div id="multiply" class="flt2 evt"><h1 class="keys">*</h1></div> <div id="divide" class="flt2 evt"><h1 class="keys">/</h1></div> </div> </body> <script src="script.js"></script> </html>
Comments
Post a Comment