1
Ich habe versucht, diesen Rechner zu erstellen, und ich möchte, dass beim Klicken auf die gesamte Taste/Schaltfläche die Nummer auf dem Bildschirm angezeigt wird. Wenn ich jedoch in den Bereich h1 der Taste/Schaltfläche klicke, ist die Ausgabe nicht definiert. Um das Problem zu verstehen, klicken Sie auf den weißen Knopf und dann auf den blauen Bereich. Wie kann ich das beheben?eventListener wird zum übergeordneten Element hinzugefügt, aber das untergeordnete Element interferiert
var evt = document.querySelectorAll(".evt");
var screenText = document.getElementById("screentext");
var show = function(e) {
\t screenText.innerHTML += e.srcElement.firstChild.innerHTML;
}
for(var i = 0 ; i < 14 ; i++) {
\t evt[i].addEventListener("click", show);
}#calcbody {
width: 400px;
\t height: 500px;
\t border: 2px solid black;
}
#screen {
\t width: 90%;
\t height: 15%;
\t border: 1px groove black;
\t margin: 5%;
\t text-align: right;
}
.flt {
\t float: left;
\t width: 20%;
\t height: 17%;
\t border: 1px solid black;
\t box-sizing: border-box;
\t margin-left: 4%;
\t margin-bottom: 2%;
\t position: relative;
}
.flt2 {
\t float: left;
\t border: 1px solid black;
\t box-sizing: border-box;
\t width: 44%;
\t height: 17%;
\t margin-left: 4%;
\t position: relative;
}
.keys {
text-align: center;
\t padding-top: 2px;
background-color: skyblue;
}<html>
<head>
\t <link rel="stylesheet" href="style.css">
\t </head>
\t <body>
\t <div id="calcbody">
\t \t <div id="screen"><h1 id="screentext"></h1></div>
\t \t \t <div id="num1" class="flt evt"><h1 class="keys">1</h1></div>
\t \t \t <div id="num2" class="flt evt"><h1 class="keys">2</h1></div>
\t \t \t <div id="num3" class="flt evt"><h1 class="keys">3</h1></div>
\t \t \t <div id="num4" class="flt evt"><h1 class="keys">4</h1></div>
\t \t \t <div id="num5" class="flt evt"><h1 class="keys">5</h1></div>
\t \t \t <div id="num6" class="flt evt"><h1 class="keys">6</h1></div>
\t \t \t <div id="num7" class="flt evt"><h1 class="keys">7</h1></div>
\t \t \t <div id="num8" class="flt evt"><h1 class="keys">8</h1></div>
\t \t \t <div id="num9" class="flt evt"><h1 class="keys">9</h1></div>
\t \t \t <div id="num0" class="flt evt"><h1 class="keys">0</h1></div>
\t \t \t <div id="plus" class="flt evt"><h1 class="keys">+</h1></div>
\t \t \t <div id="minus" class="flt evt"><h1 class="keys">-</h1></div>
\t \t \t <div id="multiply" class="flt2 evt"><h1 class="keys">*</h1></div>
\t \t \t <div id="divide" class="flt2 evt"><h1 class="keys">/</h1></div>
\t \t </div>
\t </body>
\t <script src="script.js"></script>
</html>
'.srcElement' ist ein Merkmal der alten IE-Browser. Das normenkonforme Äquivalent ist "e.target". –