Question

因此，当我运行此代码并查看控制台时，我得到了响应：＆＃34;指定值＆＃34;未定义＆＃34;不是有效的数字。该值必须与main.js匹配：45以下正则表达式： - ？（\ d + | \ d +。\ d + |。\ d +）（[eE] [ - +]？\ d +）？

我已经更新了HTML，为JS中的总数做了onclick。我还点了一下onclick来清除HTML中的显示。我想我实际上还需要在JS中添加一个cleardisplay函数。

我正在努力解决的问题是更新JS以接受值并返回计算响应的最佳方法是什么？

目前我正在尝试进行评估，但我想我错误地使用它或者没有正确连接它。

如果我对更新此内容感到完全错误，请告诉我。

为了更好看： jsfiddle

＆＃13;

let number = document.getElementsByClassName("number");
let operate = document.getElementsByClassName("operate");
let clear = document.getElementById("clear");
let sub=document.getElementById("sub");
let multiply = document.getElementById("mul");
let divide = document.getElementById("divide");
let add = document.getElementById("plus");
let display = document.querySelector("input");


//Functions or For Loops

for (let i = 0; i < number.length; i++) {
  number[i].addEventListener("click", function() {
      let inputValue = entry.querySelector("input").value;
      let buttonValue = this.textContent;
      if (buttonValue === "C") {
        display.value = " ";
      } else {
        entry.innerHTML += buttonValue;
      }
  })
}

for (let i = 0; i < operate.length; i++) {
  operate[i].addEventListener("click", function() {
      let inputValue = entry.querySelector("input").value;
      let buttonValue = this.textContent;
      if (buttonValue === "C") {
        entry.innerHTML = " ";
      } else {
        entry.innerHTML += buttonValue;
      }
  })
}

function total(){
  let display = document.querySelector("input");//equal in HTML using "total()" for the onclick
  x=display.value;
  x=eval(x);
  display.value=x;
}

＆＃13;

/*Background color: #64B255;
Border color between buttons: #83C178;
Color for numbers, equal enterfield: white;
Operators (not =) color: #4B6E44;
Hover color for equal and clear: #83C178*/
.wrapper{
  max-width: 375px;
  margin: 0 auto;
  margin-top: 50px;
}
section {
  background-color: #64B255;
  display: flex;
  display: flex;
  color: white;
  text-align: center;
  justify-content: center;
  flex-wrap: wrap;

}

.number{
  border: 1px solid gray;
  box-sizing: border-box;
  width:80px;
  flex-grow: 1;
  height: 80px;
}



#entry{
  flex-grow: 3;
  width: 245px;
  font-size: 30px;
  text-align: right;
}

#entry:hover{
  background-color: #83C178;
}

#clear{
  border: 2px solid gray;
  box-sizing: border-box;
  width:80px;
  flex-grow: 1;
  height: 80px;
}

.dot{
  border: 1px solid gray;
  box-sizing: border-box;
  width:80px;
  flex-grow: 1;
  height: 80px;
}

.dot:hover{
  background-color: #83C178;
}

.operate{
  background-color: #83C178;
  color: #4B6E44;
  box-sizing: border-box;
  width: 80px;
  border: 1px solid gray;
  flex-grow: 1;
  height: 80px;
  font-weight: 100;
}

.operate:hover{
  color:white;
}

.number:hover{
  background-color: #83C178;
}

input{
  width: 20%;
  height: 90%;
  background-color: #64B255;
  border-color: transparent;
  text-align: right;
  font-size: 60%;
  color: white;
  padding-bottom: 5px;
}

＆＃13;

<body>
    <div class="wrapper">
      <section class="container">
        <div class="clear" id="clear" onclick="clearDisplay()"><h1>C</h1></div>
        <div id="entry"><input id="entryText" type="number"></div>
      </section>
      <section class="keys">
        <div class="number seven" value="7"><h1>7</h1></div>
        <div class="number eight" value="8"><h1>8</h1></div>
        <div class="number nine" value="9"><h1>9</h1></div>
        <div class="operate divide" id="divide"><h1>/</h1></div>
        <div class="number four" value="4"><h1>4</h1></div>
        <div class="number five" value="5"><h1>5</h1></div>
        <div class="number six" value="6"><h1>6</h1></div>
        <div class="operate mult" id="mul"><h1>x</h1></div>
        <div class="number one" value="1"><h1>1</h1></div>
        <div class="number two" value="2"><h1>2</h1></div>
        <div class="number three" value="3"><h1>3</h1></div>
        <div class="operate minus" id="sub"><h1>-</h1></div>
        <div class="number zero" value="0"><h1>0</h1></div>
        <div class="dot"><h1>.</h1></div>
        <div class="operate equal" id="equal" onclick="total()"><h1>=</h1></div>
        <div class="operate plus" id="plus"><h1>+</h1></div>
      </section>
  </div>
    <script src="main.js"></script>
  </body>

＆＃13;

Answer 1

您必须添加clearDisplay功能：

function clearDisplay(){
    display.value = "";
}

此外，您还必须询问所选的运算符是否相等（=）。您不能将=符号添加到输入中。然后你的第二个必须看起来像这样：

for (let i = 0; i < operate.length; i++) {
   operate[i].addEventListener("click", function() {
     let inputValue = entry.querySelector("input").value;
     let buttonValue = this.textContent;
     if (buttonValue === "C") {
       entry.innerHTML = " ";
     } else if(buttonValue !== "="){
       entry.innerHTML += buttonValue;
     }
  })
}

JS - 如何返回计算并清除显示？

1 个答案: