JavaScript计算器输入不清除和十进制允许多次

Question

＆＃13;

＆＃13;

const numbers = document.querySelectorAll('.number');
let display = document.getElementById('display');
let output,
  zero,
  decimal;

// Loop through all buttons to output value to display div
for (let i = 0; i < numbers.length; i++) {
  numbers[i].addEventListener('click', (e) => {

    output = display.innerHTML += e.target.value;

    if (output.length > 16) {
      alert('Maximum input reached');
    }
  });
};

// Delete button functionality
document.getElementById('buttonDelete').addEventListener('click', (e) => {
  if (e.target.value === 'delete') {
    display.innerHTML = '';
  }
});



document.querySelector('#buttonZero').addEventListener('click', (e) => {
  zero = e.target.value;

  if (display.innerHTML === '') {
    output = display.innerHTML = zero;
  } else if (display.innerHTML === output) {
    output = display.innerHTML += zero;
  }
});

document.querySelector('#buttonDecimal').addEventListener('click', (e) => {
  decimal = e.target.value;
  if (display.innerHTML === '') {
    output = display.innerHTML = display.innerHTML.concat('0.');
  } else if (display.innerHTML === output) {
    display.innerHTML = display.innerHTML.concat('.');
  }
});


document.querySelector('#buttonEqual').addEventListener('click', (e) => {
  if (display.innerHTML === output) {
    display.innerHTML = eval(output);
  } else {
    display.innerHTML = '';
  }
});

let operators = document.querySelectorAll(".operator");
for (var i = 0; i < operators.length; i++) {
  operators[i].addEventListener('click', (e) => {
    operator = e.target.value;

    if (display.innerHTML === '') {
      display.innerHTML = display.innerHTML.concat('');
    } else if (output) {
      display.innerHTML = output.concat(operator);
    }

  });
}

＆＃13;

#calculatorBody {
   background-color: skyblue;
   border-radius: 5px;
   padding-bottom: 10px;

}

.calculatorButton {
   display: inline-block;
   background-color: #595959;
   padding: 25px;
   margin: 5px;
   border-radius: 5px;
   color: #fff;
}

.calculatorButton:active{
   background-color: #fff;
   color: #000;
}

#buttonZero {
   width: 138px;
}

#buttonDelete {
   width: 132px;
   background-color: #ff3333;
}

#buttonEqual {
   background-color: #33cc33;
   color: #000;
}

#buttonPeriod {
   background-color: #404040;
}

.number {
   background-color: #404040;
}

.operator {
   background-color: #a6a6a6;
}



#display {
   font-family: 'Orbitron', sans-serif;
   border-radius: 5px;
   border: solid gray 2px;
   background-color: #d9d9d9;
   margin: auto;
   margin-top: 30px;
   margin-bottom: 15px;
   width: 80%;
   overflow: hidden;
   display: block;
   font-size: 21px;
   padding-top: 12px;
   height: 55px;
   padding-right: 4px;
   text-align: right;
}


/*#display p {
   float: right;
   font-size: 35px;
   margin-top: -25px;
}*/

@media only screen and (max-width: 375px) {
   .calculatorButton {
      padding: 20px;
   }
   #display {
      margin-top: 20px;
   }
}

＆＃13;

  <div class="container text-center">
    <div class="row">
      <div id="calculatorBody" class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 ">
        <div>
          <div class="row">
            <div id="display"></div>
          </div>
            <div id="buttonSection">
              <div class="row">
                <button value="delete" id="buttonDelete" class="calculatorButton operator">Delete</button>
                <button value="%" id="buttonPercent" class="calculatorButton operator">%</button>
                <button value="+" id="buttonPlus" class="calculatorButton operator">+</button>
              </div>
              <div class="row">
                <button value="7" id="button7" class="calculatorButton number">7</button>
                <button value="8" id="button8" class="calculatorButton number">8</button>
                <button value="9" id="button9" class="calculatorButton number">9</button>
                <button value="/" id="buttonDivide" class="calculatorButton operator">/</button>
              </div>
              <div class="row">
                <button value="4" id="button4" class="calculatorButton number">4</button>
                <button value="5" id="button5" class="calculatorButton number">5</button>
                <button value="6" id="button6" class="calculatorButton number">6</button>
                <button value="*" id="buttonMultiply" class="calculatorButton operator">x</button>
              </div>
              <div class="row">
                <button value="1" id="button1" class="calculatorButton number">1</button>
                <button value="2" id="button2" class="calculatorButton number">2</button>
                <button value="3" id="button3" class="calculatorButton number">3</button>
                <button value="-" id="buttonMinus" class="calculatorButton operator">-</button>
              </div>
              <div class="row">
                <button value="0" id="buttonZero" class="calculatorButton zero">0</button>
                <button value="." id="buttonDecimal" class="calculatorButton decimal">.</button>
                <button value="=" id="buttonEqual" class="calculatorButton equal">=</button>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

我正在制作一个不使用jQuery的基本JavaScript计算器。

计算器正常运行，但输入下一个输入时结果并不清晰，结果只是转到下一个计算结果。我还需要一次只允许小数。

任何帮助也表示赞赏，任何有关使代码更好的提示都会很好但不是必需的。我有点新手，真的想提高我的香草JavaScript技能。

提前致谢！

Answer 1

• 首先，您需要将代码包装在onload函数中，以确保只在节点准备好后才调用脚本。

• 有许多方法可以清除屏幕以进行下一次计算。其中一个是使用标志变量，在完成操作时将设置为true。

• 对于小数，另一种方法是使用正则表达式过滤掉冗余小数

  / ^ [+ - ]？（\ d +）？\ d + $ /

或者简单地说，您可以使用indexOf函数查看是否已存在小数。 下面是根据上述建议更新的摘要。

<script>

function myFunction(){

     let calculated= false;
     const numbers = document.querySelectorAll('.number');
let display = document.getElementById('display');
let output,
  zero,
  decimal;

// Loop through all buttons to output value to display div
for (let i = 0; i < numbers.length; i++) {
  numbers[i].addEventListener('click', (e) => {
    if(calculated){
        calculated= false;
        display.innerHTML= "";
    }
    output = display.innerHTML += e.target.value;

    if (output.length > 16) {
      alert('Maximum input reached');
    }
  });
};

// Delete button functionality
document.getElementById('buttonDelete').addEventListener('click', (e) => {
  if (e.target.value === 'delete') {
    display.innerHTML = '';
  }
});



document.querySelector('#buttonZero').addEventListener('click', (e) => {
  zero = e.target.value;

  if (display.innerHTML === '') {
    output = display.innerHTML = zero;
  } else if (display.innerHTML === output) {
    output = display.innerHTML += zero;
  }
});

document.querySelector('#buttonDecimal').addEventListener('click', (e) => {
  decimal = e.target.value;
  if (display.innerHTML === '') {
    output = display.innerHTML = display.innerHTML.concat('0.');
  } else if (display.innerHTML === output && display.innerHTML.indexOf(".") < 0) {
    display.innerHTML = display.innerHTML.concat('.');
  }
});


document.querySelector('#buttonEqual').addEventListener('click', (e) => {
  if (display.innerHTML === output) {
    display.innerHTML = eval(output);
    calculated= true;
  } else {
    display.innerHTML = '';
  }
});

let operators = document.querySelectorAll(".operator");
for (var i = 0; i < operators.length; i++) {
  operators[i].addEventListener('click', (e) => {
    operator = e.target.value;

    if (display.innerHTML === '') {
      display.innerHTML = display.innerHTML.concat('');
    } else if (output) {
      display.innerHTML = output.concat(operator);
    }

  });
}


     }





    </script>
</head>
<body onload="myFunction()">
    <div class="container text-center">
        <div class="row">
            <div id="calculatorBody"
                class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 ">
                <div>
                    <div class="row">
                        <div id="display"></div>
                    </div>
                    <div id="buttonSection">
                        <div class="row">
                            <button value="delete" id="buttonDelete"
                                class="calculatorButton operator">Delete</button>
                            <button value="%" id="buttonPercent"
                                class="calculatorButton operator">%</button>
                            <button value="+" id="buttonPlus"
                                class="calculatorButton operator">+</button>
                        </div>
                        <div class="row">
                            <button value="7" id="button7" class="calculatorButton number">7</button>
                            <button value="8" id="button8" class="calculatorButton number">8</button>
                            <button value="9" id="button9" class="calculatorButton number">9</button>
                            <button value="/" id="buttonDivide"
                                class="calculatorButton operator">/</button>
                        </div>
                        <div class="row">
                            <button value="4" id="button4" class="calculatorButton number">4</button>
                            <button value="5" id="button5" class="calculatorButton number">5</button>
                            <button value="6" id="button6" class="calculatorButton number">6</button>
                            <button value="*" id="buttonMultiply"
                                class="calculatorButton operator">x</button>
                        </div>
                        <div class="row">
                            <button value="1" id="button1" class="calculatorButton number">1</button>
                            <button value="2" id="button2" class="calculatorButton number">2</button>
                            <button value="3" id="button3" class="calculatorButton number">3</button>
                            <button value="-" id="buttonMinus"
                                class="calculatorButton operator">-</button>
                        </div>
                        <div class="row">
                            <button value="0" id="buttonZero" class="calculatorButton zero">0</button>
                            <button value="." id="buttonDecimal"
                                class="calculatorButton decimal">.</button>
                            <button value="=" id="buttonEqual" class="calculatorButton equal">=</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Answer 2

只需设置一个标志，该标志将检查点击的最后一个按钮是否为等号，如果显示其他值连接的话。

＆＃13;

＆＃13;

 const numbers = document.querySelectorAll('.number');
    let display = document.getElementById('display');
    let output,
        zero,
        decimal, equal = false;

    // Loop through all buttons to output value to display div
    for (let i = 0; i < numbers.length; i++) {
        numbers[i].addEventListener('click', (e) => {

            if (equal) {
                output = display.innerHTML = e.target.value;
            }else {
                output = display.innerHTML += e.target.value;
            }

            if (output.length > 16) {
                alert('Maximum input reached');
            }
            equal = false;
        });
    };

    // Delete button functionality
    document.getElementById('buttonDelete').addEventListener('click', (e) => {
        equal = false;
        if (e.target.value === 'delete'
        ) {
            display.innerHTML = '';
        }
    });


    document.querySelector('#buttonZero').addEventListener('click', (e) => {
        equal = false;
        zero = e.target.value;

        if (display.innerHTML === '') {
            output = display.innerHTML = zero;
        } else if (display.innerHTML === output) {
            output = display.innerHTML += zero;
        }
    });

    document.querySelector('#buttonDecimal').addEventListener('click', (e) => {
        equal = false;
        decimal = e.target.value;
        if (display.innerHTML === '') {
            output = display.innerHTML = display.innerHTML.concat('0.');
        } else if (display.innerHTML === output) {
            display.innerHTML = display.innerHTML.concat('.');
        }
    });


    document.querySelector('#buttonEqual').addEventListener('click', (e) => {
        equal = true;
        if (display.innerHTML === output) {
            display.innerHTML = eval(output);
        }
        else {
            display.innerHTML = '';
        }
    });

    let operators = document.querySelectorAll(".operator");
    for (var i = 0; i < operators.length; i++) {
        operators[i].addEventListener('click', (e) => {
            equal = false;
            operator = e.target.value;

            if (display.innerHTML === '') {
                display.innerHTML = display.innerHTML.concat('');
            } else if (output) {
                display.innerHTML += operator;
            }

        });
    }

＆＃13;

        #calculatorBody {
            background-color: skyblue;
            border-radius: 5px;
            padding-bottom: 10px;

        }

        .calculatorButton {
            display: inline-block;
            background-color: #595959;
            padding: 25px;
            margin: 5px;
            border-radius: 5px;
            color: #fff;
        }

        .calculatorButton:active {
            background-color: #fff;
            color: #000;
        }

        #buttonZero {
            width: 138px;
        }

        #buttonDelete {
            width: 132px;
            background-color: #ff3333;
        }

        #buttonEqual {
            background-color: #33cc33;
            color: #000;
        }

        #buttonPeriod {
            background-color: #404040;
        }

        .number {
            background-color: #404040;
        }

        .operator {
            background-color: #a6a6a6;
        }

        #display {
            font-family: 'Orbitron', sans-serif;
            border-radius: 5px;
            border: solid gray 2px;
            background-color: #d9d9d9;
            margin: auto;
            margin-top: 30px;
            margin-bottom: 15px;
            width: 80%;
            overflow: hidden;
            display: block;
            font-size: 21px;
            padding-top: 12px;
            height: 55px;
            padding-right: 4px;
            text-align: right;
        }

        /*#display p {
           float: right;
           font-size: 35px;
           margin-top: -25px;
        }*/

        @media only screen and (max-width: 375px) {
            .calculatorButton {
                padding: 20px;
            }

            #display {
                margin-top: 20px;
            }
        }

＆＃13;

<div class="container text-center">
    <div class="row">
        <div id="calculatorBody" class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 ">
            <div>
                <div class="row">
                    <div id="display"></div>
                </div>
                <div id="buttonSection">
                    <div class="row">
                        <button value="delete" id="buttonDelete" class="calculatorButton operator">Delete</button>
                        <button value="%" id="buttonPercent" class="calculatorButton operator">%</button>
                        <button value="+" id="buttonPlus" class="calculatorButton operator">+</button>
                    </div>
                    <div class="row">
                        <button value="7" id="button7" class="calculatorButton number">7</button>
                        <button value="8" id="button8" class="calculatorButton number">8</button>
                        <button value="9" id="button9" class="calculatorButton number">9</button>
                        <button value="/" id="buttonDivide" class="calculatorButton operator">/</button>
                    </div>
                    <div class="row">
                        <button value="4" id="button4" class="calculatorButton number">4</button>
                        <button value="5" id="button5" class="calculatorButton number">5</button>
                        <button value="6" id="button6" class="calculatorButton number">6</button>
                        <button value="*" id="buttonMultiply" class="calculatorButton operator">x</button>
                    </div>
                    <div class="row">
                        <button value="1" id="button1" class="calculatorButton number">1</button>
                        <button value="2" id="button2" class="calculatorButton number">2</button>
                        <button value="3" id="button3" class="calculatorButton number">3</button>
                        <button value="-" id="buttonMinus" class="calculatorButton operator">-</button>
                    </div>
                    <div class="row">
                        <button value="0" id="buttonZero" class="calculatorButton zero">0</button>
                        <button value="." id="buttonDecimal" class="calculatorButton decimal">.</button>
                        <button value="=" id="buttonEqual" class="calculatorButton equal">=</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;