Question

我是新手，正在尝试制作计算器，这里是如何工作的：当用户单击屏幕是否为空时，我想屏幕上说“输入值”

问题是：我这样做之后，单击任何按钮时都无法更改屏幕

这是代码：

const screen = document.querySelector(".output")
const btns = document.querySelectorAll(".btn")
const equal = document.querySelector(".equalize")
const clear = document.querySelector(".clear")

btns.forEach(item => {
  item.addEventListener("click", function() {
    let warning = document.querySelector(".warning")
    let number = item.getAttribute("id")
    if (screen.innerHTML === warning) {
      screen.innerHTML = number
    } else {
      screen.innerHTML += number
    }
    console.log(screen.innerHTML)
  })
})

clear.addEventListener("click", function() {
  screen.innerHTML = ""
})
equal.addEventListener("click", () => {
  if (screen.innerHTML === "" || screen.innerHTML === undefined ||
    screen.innerHTML === null) {
    screen.innerHTML = "<h5 class='warning mt-4'>Please Enter a Value</h5>"
  } else {
    screen.innerHTML = eval(screen.innerHTML)
  }
})

<div class="container">
  <div class="row">
    <div class="col-md-4 mt-5 mx-auto">

      <div class="output text-center display-3">
      </div>
      <div class=button>
        <button class="number btn  btn-primary text-light" id="1">1</button>
        <button class="number btn " id="2">2</button>
        <button class="number btn " id="3">3</button>

        <button class="number btn " id="4">4</button>

        <button class="number btn" id="5">5</button>

        <button class="number btn" id="6">6</button>

        <button class="number btn" id="7">7</button>
        <button class="number btn " id="8">8</button>
        <button class="number btn " id="9">9</button>
        <button class="number btn " id="0">0</button>
        <button class="plus btn " id="+">+</button>
        <button class="minus btn " id="-">-</button>
        <button class="divide btn " id="/">/</button>
        <button class="equalize method  " id="=">=</button>
        <button class="clear method " id="C">C</button>
      </div>
    </div>
  </div>
</div>

Answer 1

screen.innerHTML === warning将永远是不正确的。 screen.innerHTML是一个字符串，而warning是一个DOM元素。您真的不需要与任何事物进行比较，只需测试warning元素是否存在。

您还需要检查用户单击=按钮时是否显示警告，否则当您尝试对其进行评估时会收到错误消息。

一个更好的主意可能是在单独的DIV中显示错误消息，而不是使用与公式相同的DIV。

const screen = document.querySelector(".output")
const btns = document.querySelectorAll(".btn")
const equal = document.querySelector(".equalize")
const clear = document.querySelector(".clear")

btns.forEach(item => {
  item.addEventListener("click", function() {
    let warning = document.querySelector(".warning")
    let number = item.getAttribute("id")
    if (warning) {
      screen.innerHTML = number
    } else {
      screen.innerHTML += number
    }
    console.log(screen.innerHTML)
  })
})

clear.addEventListener("click", function() {
  screen.innerHTML = ""
})
equal.addEventListener("click", () => {
  let warning = document.querySelector(".warning")
  if (warning) {
    return;
  }
  if (screen.innerHTML.trim() === "") {
    screen.innerHTML = "<h5 class='warning mt-4'>Please Enter a Value</h5>"
  } else {
    screen.innerHTML = eval(screen.innerHTML)
  }
})

<div class="container">
  <div class="row">
    <div class="col-md-4 mt-5 mx-auto">

      <div class="output text-center display-3"></div>
      <div class=button>
        <button class="number btn  btn-primary text-light" id="1">1</button>
        <button class="number btn" id="2">2</button>
        <button class="number btn" id="3">3</button>
        <button class="number btn" id="4">4</button>
        <button class="number btn" id="5">5</button>
        <button class="number btn" id="6">6</button>
        <button class="number btn" id="7">7</button>
        <button class="number btn" id="8">8</button>
        <button class="number btn" id="9">9</button>
        <button class="number btn" id="0">0</button>
        <button class="plus btn" id="+">+</button>
        <button class="minus btn" id="-">-</button>
        <button class="divide btn " id="/">/</button>
        <button class="equalize method  " id="=">=</button>
        <button class="clear method " id="C">C</button>
      </div>
    </div>
  </div>
</div>

警告后我的计算器没有给出响应

1 个答案: