JavaScript：删除调用该 EventListener 的 function 中的 EventListener

Question

I am trying to make a decimal button for an in-browser calculator using vanilla JavaScript, HTML, and CSS. The problem that I am having is trying to turn off the decimal button after using it incase of nonsense numbers (ie 3.1.4.0), however my code isn't as intended:我正在尝试使用香草 JavaScript、HTML 和 CSS 为浏览器内计算器制作小数点按钮。我遇到的问题是在使用小数点按钮后尝试关闭小数点按钮，以防出现无意义的数字（即 3.1.4.0），但是我的代码不符合预期：

//global constants
const calcchoices = Array.from(document.querySelectorAll(".allbtns"));
const decimalbtn = document.querySelector("#decimal");

function buttonpressing(e){

    document.getElementById("display").value += e.target.value //updates the display with what you pressed

    //if decimal is pressed, make sure you cant press it again
    if(e.target.id === "decimal"){
        //turn off the decimal event listener only
        decimalbtn.removeEventListener("click", buttonpressing);
    }
}
calcchoices.forEach(choice => choice.addEventListener("click", buttonpressing))

Here is the HTML for this (there were more "number" buttons such as 0 but I deleted them for this example:这是 HTML（有更多的“数字”按钮，例如 0，但我在这个例子中删除了它们：

<!DOCTYPE html>
<!--This is the html file for the calculator-->
<html>
<head>
</head>
<body>
    <div id="calculator" class="allbtns">
        <input type="text" name="display" id="display" style="grid-area: display" disabled>
        <!--Numbers-->
        <button id="0" value="0" class="number" style="grid-area:zero">0</button>
        <button id="decimal" class ="number" style="grid-area:decimal" value=".">.</button>
    </div>
</body>
<!-- JS source-->
<script type="text/javascript" src="calculator.js"></script>
</html>

I am unsure why I can remove that EventListener for the decimalbtn?我不确定为什么我可以删除 decimalbtn 的 EventListener？ I suspect it is part of calling the forEach method inside of calcchoices.我怀疑这是在 calcchoices 中调用 forEach 方法的一部分。

Answer 1

You added the click handler to the <div id="calculator" class="allbtns"> ... try const calcchoices = Array.from(document.querySelectorAll(".allbtns.number"));您将点击处理程序添加到<div id="calculator" class="allbtns"> ...尝试const calcchoices = Array.from(document.querySelectorAll(".allbtns.number")); instead反而

You can then use this instead of e.target as well然后您也可以使用this代替e.target

 const calcchoices = Array.from(document.querySelectorAll(".allbtns.number")); const decimalbtn = document.querySelector("#decimal"); function buttonpressing(e) { document.getElementById("display").value += this.value; if (this.id === "decimal") { this.removeEventListener("click", buttonpressing); } } calcchoices.forEach(choice => choice.addEventListener("click", buttonpressing))

 <div id="calculator" class="allbtns"> <input type="text" name="display" id="display" style="grid-area: display" disabled> <:--Numbers--> <button id="d0" value="0" class="number" style="grid-area:zero">0</button> <button id="decimal" class="number" style="grid-area.decimal" value=".">.</button> </div>

JavaScript：删除调用该 EventListener 的 function 中的 EventListener

问题描述

1 个解决方案

解决方案1
3 2020-05-11 23:41:06

JavaScript：删除调用该 EventListener 的 function 中的 EventListener

问题描述

1 个解决方案

解决方案1 3 2020-05-11 23:41:06

解决方案1
3 2020-05-11 23:41:06