当我点击数字按钮时，为什么我的 Javascript 计算器功能 return "undefined" 是随机的？

Question

我正在 javascript 中构建一个功能齐全的计算器。到目前为止，我能够向显示添加数字和删除数字（均使用点击事件）。

但是，由于某种原因，当我单击数字按钮时，我随机在显示中显示“未定义”return。因此，以我的代码为例，当我单击数字按钮时，currNum 变量应该采用按钮值（这是一个数字）并将其附加到显示（numberDisplay）。但它给了我随机未定义的。

我尝试过的东西：

即使我删除了“deleteLastnumberFromDisplay”处理程序及其相关的点击事件，也会发生此未定义的错误。
在“addClickedNumberToDisplay”里面我也试过运行 currNum = numberDisplay.value += e.target.value;而不是 parseInt(currNum = numberDisplay.value += e.target.value);它仍然 returns 和未定义的日志。
在“addClickedNumberToDisplay”里面我也试过运行 currNum = numberDisplay.value += e.target.value; return parseInt(currNum);

这是我到目前为止的代码。

另外，我也非常感谢目前为止关于改进代码的任何提示。谢谢

HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/utils.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/svg.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
          integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <title>Pretty Calc</title>
</head>
<body>
<div class="calculator">
    <div id="calc_container">
        <h1>Pretty<br> <span>calculator</span></h1>
        <main>
            <input type="text" id="curr_calculation" class="input-field" placeholder=0>
            <div class="num_grid">
                <!--            Row 1-->
                <button type="button" id="clear" class="top-operators btn"><p>clr</p></button>
                <button type="button" id="delete" class="top-operators"><p><i class="fa-solid fa-arrow-left"></i></p>
                </button>
                <button type="button" id="divide" class="operator btn"><p>/</p></button>
                <!--            Row 2-->
                <button type="button" id="seven" class="num-btn" value="7"><p>7</p></button>
                <button type="button" id="eight" class="num-btn" value="8"><p>8</p></button>
                <button type="button" id="nine" class="num-btn" value="9"><p>9</p></button>
                <button type="button" id="multiply btn" class="operator"><p>x</p></button>
                <!--            Row 3-->
                <button type="button" id="four" class="num-btn" value="4"><p>4</p></button>
                <button type="button" id="five" class="num-btn" value="5"><p>5</p></button>
                <button type="button" id="six" class="num-btn" value="6"><p>6</p></button>
                <button type="button" id="subtract btn" class="operator"><p>-</p></button>
                <!--            Row 4-->
                <button type="button" id="one" class="num-btn" value="1"><p>1</p></button>
                <button type="button" id="two" class="num-btn" value="2"><p>2</p></button>
                <button type="button" id="three" class="num-btn" value="3"><p>3</p></button>
                <button type="button" id="plus btn" class="operator"><p>+</p></button>
                <!--            Row 4-->
                <button type="button" id="zero" class="num-btn" value="0"><p>0</p></button>
                <button type="button" id="decimal btn" value="."><p>.</p></button>
                <button type="button" id="equal btn" class="operator"><p>=</p></button>
            </div>
        </main>
    </div>
</div>
<script src="js/pretty-calc.js"></script>
</body>
</html>

JAVASCRIPT:

"use strict";
    
    // global variables
    // let prevNum;
    let currNum;
    let numBtns = Array.from(document.querySelectorAll(".num-btn"));
    let numberDisplay = document.querySelector(".input-field")
    let deleteKey = document.querySelector("#delete")
    
    
    // function calls
    function addClickedNumberToDisplay(e){
        currNum = parseInt(numberDisplay.value += e.target.value);
        return currNum;
    }
    
    function deleteLastNumberFromDisplay(e){
        let y = currNum.toString().substring(0, currNum.toString().length - 1);
        numberDisplay.value = parseInt(y);
        return currNum = parseInt(y);
    }
    
    // eventlisteners
    numBtns.forEach(numberButton => numberButton.addEventListener("click", addClickedNumberToDisplay));
    deleteKey.addEventListener("click", deleteLastNumberFromDisplay)

Answer 1

因为有时点击事件发生在<p>元素中，所以你必须获取父元素（按钮）值

currNum = parseInt(numberDisplay.value += e.target.value || e.target.parentElement.value);

我觉得最好写成<button>Text</button>而不是<button><p>Text</p></button>

当我点击数字按钮时，为什么我的 Javascript 计算器功能 return "undefined" 是随机的？

Why does my Javascript calculator function return "undefined" RANDOMLY, when I click on number buttons?

html

javascript

click

addeventlistener

mouseclick-event