javascript - addEventListener ('click' , ...) 通过点击 'numbers' 按钮，显示屏上的文本应该等于该数字

Question

我正在尝试根据前端轨道上的 freecodecamp 要求构建一个 javascript 计算器。

Codepen 链接:https://codepen.io/ekilja01/pen/MoXROe

按计算器上的任何数字，显示必须更改为该数字。 var number 也必须记住它的值，因为再次单击该数字它会变成一个新数字，所以之后我可以使用运算符和 parseInt 来评估和显示最终值。我知道如何使用 jQuery 来实现这一点，所以是这样的:

   $("#numbers a").not("#clear,#clearall").click(function(){
        number += $(this).text();
        totaldiv.text(number);

    });
    $("#operators a").not("#equals").click(function(){
        operator = $(this).text();
        newnumber = number;
        number = "";
        totaldiv.text("0");
    });
    $("#clear,#clearall").click(function(){
        number = "";
        totaldiv.text("0");
        if ($(this).attr("id") === "clearall") {
            newnumber = "";
        }
    });
    //Add your last .click() here!
    $("#equals").click(function(){
        if (operator === "+"){
            number = (parseInt(number, 10) + parseInt(newnumber,10)).toString(10);
        } else if (operator === "-"){
            number = (parseInt(newnumber, 10) - parseInt(number,10)).toString(10);
        } else if (operator === "÷"){
            number = (parseInt(newnumber, 10) / parseInt(number,10)).toString(10);
        } else if (operator === "×"){
            number = (parseInt(newnumber, 10) * parseInt(number,10)).toString(10);
        }
        totaldiv.text(number);
        number = "";
        newnumber = "";
    });

但是在 vanilla js 中什么可以等同于这个？我试过 .textContent 或 .innerHTML，但它们都不起作用。计算器显示 undefined 或 <a>1</a> ... <a>AC</a> .还有什么等同于.not()。任何帮助将不胜感激。

html:

<div id="calculator">
          <p id="cal">CALCULATOR</p>
          <div id="total">
          </div>
          <div id="operators">
              <a>&divide;</a>
              <a>&times;</a>
              <a>+</a>
              <a>-</a>
              <a>=</a>
          </div>
          <div id="numbers">
              <a>1</a>
              <a>2</a>
              <a>3</a>
              <a>4</a>
              <a>5</a>
              <a>6</a>
              <a>7</a>
              <a>8</a>
              <a>9</a>
              <a id="clear">C</a>
              <a>0</a>
              <a id="clearall">AC</a>
          </div>
      </div>

js:

document.addEventListener('DOMContentLoaded', function (event) {
    console.log('DOM OK');

    // Declare variables for number, new number and operators

    var number, newNumber, operator = "";

    // Declare variable total number to display total on the calculator's display

    var totalNumber = document.getElementById("total");
    totalNumber.textContent = "0";



    document.getElementById("numbers").addEventListener('click', function(){
        number += this.textContent;
        totalNumber.textContent = number;
    })

})

Answer 1

您可能想在回调函数中使用事件参数。例如:

 number  = "";

document.getElementById("numbers").addEventListener('click', function(e){
    number += e.target.textContent;
    totalNumber.textContent = number;
})

具体关于事件目标属性的更多信息: https://developer.mozilla.org/en-US/docs/Web/API/Event/target

完整的JS代码:

 document.addEventListener('DOMContentLoaded', function (event) {
 console.log('DOM OK');

// Declare variables for number, new number and operators

var number, newNumber, operator = "";

// Declare variable total number to display total on the calculator's display

var totalNumber = document.getElementById("total");
totalNumber.textContent = "0";



number  = "";

document.getElementById("numbers").addEventListener('click', function(e){
 number += e.target.textContent;
 totalNumber.textContent = number;
})

})