堆棧內存溢出
  簡體   English   中英

JavaScript計算器輸入未清除並且十進制允許多次

[英]JavaScript calculator input not clearing and decimal allowed multiple times

 原文  2017-05-17 22:19:45  0   2    javascript/ html

問題描述

 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); } }); } 
 #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; } } 
  <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>

我正在開發不使用jQuery的基本JavaScript計算器。

計算器可以使用，但是當輸入下一個輸入時結果並不會清除，並且結果僅會轉到下一個計算中。 我還需要只允許小數點一次。

感謝您的任何幫助，也可以提供一些使代碼更好的技巧，但這不是必需的。 我有點新，真的想提高我的原始JavaScript技能。

提前致謝！

2 個解決方案

解決方案1
 0 已采納  2017-05-17 22:53:10

  • 首先，您需要將代碼包裝在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>

解決方案2
 0  2017-05-17 23:05:58

只需設置一個標志，該標志將檢查最后單擊的按鈕是否為等號，如果已清除，則將其他值串聯。 

  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; } }); } 
  #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; } } 
 <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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 清除Javascript / HTML計算器中的值 JavaScript 計算器中只有 1 位小數？ Javascript二進制到十進制計算器 十進制到分數計算器 Javascript 問題 按“=”后清除 javascript 計算器中的顯示 使用JavaScript清除輸入字段 JavaScript計算器輸入背景 Javascript 文本輸入計算器 HTML 在輸入中多次使用 Javascript 多次執行 Javascript 事件的輸入字段
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM