时间戳

首页 > 解决方案 > 查询选择正确的元素

javascript - 查询选择正确的元素

问题描述

我正在制作一个计算器，但无法使用它querySelector来选择正确的操作。现在，它正在选择“ divider”，因为这是 html 中的第一个元素。即使我单击其他操作键也会发生这种情况。

我也尝试querySelector在父容器上使用，operationKeyContainer但它给了我未定义的。我的理由是它会抓住孩子们，但我想不会。

这是我的代码。我知道我有很多工作要重构它，但我只想让它现在工作。

<body>
  <main>
    <section class="equationDisplay display">test</section>
    <section class="answerDisplay display answerFont">0</section>
    <div class="divider"></div>
    <section class="calculatorButton">
      <section class="keyContainer operationKeyContainer">
        <button class="operationKey lightRed" data-key="divide">÷</button>
        <button class="operationKey lightRed" data-key="multiply">
          &times;
        </button>
        <button class="operationKey lightRed" data-key="add">+</button>
        <button class="operationKey lightRed" data-key="subtract">–&lt;/button>
      </section>
      <section class="keyContainer numberKeyContainer">
        <button class="numberKey" data-key="7">7</button>
        <button class="numberKey" data-key="8">8</button>
        <button class="numberKey" data-key="9">9</button>
        <button class="numberKey" data-key="4">4</button>
        <button class="numberKey" data-key="5">5</button>
        <button class="numberKey" data-key="6">6</button>
        <button class="numberKey" data-key="1">1</button>
        <button class="numberKey" data-key="2">2</button>
        <button class="numberKey" data-key="3">3</button>
        <button class="numberKey" data-key="0">0</button>
        <button class="numberKey" data-key=".">.</button>
        <button class="cancelKey" data-key="C">C</button>
      </section>
      <section class="keyContainer calculateKeyContainer">
        <button class="calculateKey teal" data-key="calculate">=</button>
      </section>
    </section>
  </main>
  <script type="text/javascript" src="main.js"></script>
</body>

document
  .querySelector(".calculatorButton")
  .addEventListener("click", clickButton);

const answerDisplay = document.querySelector(".answerDisplay");
const calculatorButton = document.querySelector(".calculatorButton");
const operationKey = document.querySelector(".operationKey"); // <------ I select the html element here

function clickButton(e) {
  if ("key" in e.target.dataset) {
    let button = e.target;
    let keyContent = button.dataset.key;
    let displayedNum = answerDisplay.textContent;
    let numberKey = button.classList.contains("numberKey");
    let operationKeyBool = button.classList.contains("operationKey");
    let previousKeyType = calculatorButton.dataset.previousKeyType;
    let calculateKey = button.classList.contains("calculateKey");

    if (numberKey == true) {
      if (displayedNum === "0" || previousKeyType == "operator") {
        displayedNum = answerDisplay.textContent;
        calculatorButton.dataset.previousKeyType = "number";
        document.querySelector(".answerDisplay").innerHTML = keyContent;
      } else {
        document.querySelector(".answerDisplay").innerHTML =
          displayedNum + keyContent;
      }
    }

    if (operationKeyBool == true) {
      calculatorButton.dataset.previousKeyType = "operator";
      const operator = operationKey.dataset.key; // <---------- Here is the problem
      let firstValue = displayedNum;
      console.log(operator);
    }

    if (calculateKey == true) {
      const secondValue = displayedNum;
      calculateKey();
    }
  }
}

function calculate(firstValue, secondValue, operator) {
  if (operator == "add") {
    return firstValue + secondValue;
  } else if (operator == "subtract") {
    return firstValue - secondValue;
  } else if (operator == "multiply") {
    return firstValue * secondValue;
  } else if (operator == "divide") {
    return firstValue / secondValue;
  }
}

标签： javascripthtml

解决方案

改变这个

const operationKey = document.querySelector(".operationKey");

对此

const operationKey = document.querySelectorAll(".operationKey");

document.querySelectorAll will return an array of all matching element which you can then loop through.

operationKey.forEach(currKey => {
    var keyValue = currKey.value;
});

推荐阅读