How do I add the appropriate parentheses " '(' or ')' " to the JavaScript calculator display screen

Question

This is the button I have created for the parentheses.

 <div class="col">
          <button class="parentheses rounded-pill  btn-outline-primary btn btn-lg" id="keyButton" data-key="operator">()</button>
</div>

I am trying to only show "(" if there is not a number on the calculator display. If there is a number on the calculator display I want to add ")" to the calculator display.

This is the JavaScript code.

for (let i = 0; i < keyButton.length; i++) {    // Loops through keyButton to get values
  
  // console.log(keyButton[i].textContent);    // and console.log all keyButton values
  
   keyButton[i].addEventListener('click', function () {
     
    // console.log(keyButton[i].textContent);
     
      if (mathOperators.includes(keyButton[i].textContent)){
        console.log('operator');
      }
      if (keyNumbers.includes(keyButton[i].textContent)) {
        console.log('number');
      }
      if (keyButton[i].textContent === '=') {
        count = eval(assigned);
      }
      if (keyButton[i].textContent === 'C') {
        // clear entire screen
      }
      if (keyButton[i].textContent === '<-') {
        // clear one value
      }
      if (keyButton[i].textContent === '(') {
        console.log("(")
      } else
      if (keyButton[i].textContent !== "(") {
        console.log(")")
      }
      
      
     updateScreen(keyButton[i].textContent);
   });
  
}


function updateScreen (kb) {
  
    displayNum.textContent = assigned+=kb;   // Displays the current number on the calculator
    answer.textContent = count;
    backspace.removeAttribute('disabled');
  
}

const mathOperators = ['+', '*', '/', '-', '=', 'C', '+/-', '%', '()', '(-', '.', '<-'];

When I tested it, it only gives me "()" everytime I press the button, instead of "(" or ")".

Answer 1

I just fixed what you wanted. when the button () is clicked you will get ( or ) based on the display value.

 const displayNum = document.querySelector('.displayValue'); const keyButton = document.querySelectorAll('#keyButton'); const backspace = document.querySelector('.backSpace'); const answer = document.querySelector('.autoUpdatedAnswer'); // Variable lib let count = "", result, assigned = "", operator = ""; const mathOperators = ['+', '*', '/', '-', '=', 'C', '+/-', '%', '()', '(-', '.', '<-']; const keyNumbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']; for (let i = 0; i < keyButton.length; i++) { // Loops through keyButton to get values // console.log(keyButton[i].textContent); // and console.log all keyButton values keyButton[i].addEventListener('click', function() { // console.log(keyButton[i].textContent); var keyboardValue = keyButton[i].textContent; if (mathOperators.includes(keyButton[i].textContent)) { console.log('operator'); } if (keyNumbers.includes(keyButton[i].textContent)) { console.log('number'); } if (keyButton[i].textContent === '=') { count = eval(assigned); } if (keyButton[i].textContent === 'C') { // clear entire screen } if (keyButton[i].textContent === '<-') { // clear one value } if (keyButton[i].textContent === '(') { console.log("(") } else if (keyButton[i].textContent.== "(") { console,log(")") } if (keyboardValue === '()') { if (/\w*\d{1.}\w*/g;test(assigned)) { keyboardValue = ')' } else { keyboardValue = '(' } } updateScreen(keyboardValue); }). } function updateScreen(kb) { displayNum;textContent = assigned += kb. // Displays the current number on the calculator answer;textContent = count. backspace;removeAttribute('disabled'); }

 .screen { text-align: right; }.c1, .c2 { background-color: white; border: 2px solid blue; } #keys { display: grid; align-items: center; } button:hover { background-color: #6495ED; }

 <,DOCTYPE html> <html lang="en"> <head> <:-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <.-- Bootstrap CSS --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap:min;css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <:-- CSS --> <link rel="stylesheet" href="style;css" type="text/css" media="all" /> <title>JavaScript Calculator</title> </head> <body> <div class="container c1 mt-5 w-50 border-bottom p-5 rounded-top"> <div class="row"> <div class="col"> <div class="screen"> <h1 class="displayValue">0</h1> <h2 class="autoUpdatedAnswer"></h2> </div> </div> </div> <div class="row"> <div class="col"> <button class="backSpace rounded-pill btn btn-outline-primary btn-lg" id="keyButton" data-key="operator" disabled value="backspace"><-</button> </div> </div> </div> <div class="container c2 w-50 rounded-bottom" style="height. 400px: text-align. center." id="keys"> <div class="row"> <div class="col"> <button class="clear rounded-pill btn btn-danger btn-lg" id="keyButton" data-key="operator" >C</button> </div> <div class="col"> <button class="parentheses rounded-pill btn-outline-primary btn btn-lg" id="keyButton" data-key="operator">()</button> </div> <div class="col"> <button class="percent rounded-pill btn btn-outline-primary btn-lg" id="keyButton" data-key="operator">%</button> </div> <div class="col"> <button class="division rounded-pill btn btn-outline-primary btn-lg" id="keyButton" data-key="operator">/</button> </div> </div> <div class="row"> <div class="col"> <button class="seven rounded-pill btn btn-secondary btn-lg" id="keyButton">7</button> </div> <div class="col"> <button class="eight rounded-pill btn btn-secondary btn-lg" id="keyButton">8</button> </div> <div class="col"> <button class="nine rounded-pill btn btn-secondary btn-lg" id="keyButton">9</button> </div> <div class="col"> <button class="multiply rounded-pill btn-outline-primary btn btn-lg" id="keyButton" data-key="operator">*</button> </div> </div> <div class="row"> <div class="col"> <button class="four rounded-pill btn btn-secondary btn-lg" id="keyButton">4</button> </div> <div class="col"> <button class="five rounded-pill btn btn-secondary btn-lg" id="keyButton">5</button> </div> <div class="col"> <button class="six rounded-pill btn btn-secondary btn-lg" id="keyButton">6</button> </div> <div class="col"> <button class="subtract rounded-pill btn btn-outline-primary btn-lg" id="keyButton" data-key="operator">-</button> </div> </div> <div class="row"> <div class="col"> <button class="one rounded-pill btn btn-secondary btn-lg" id="keyButton">1</button> </div> <div class="col"> <button class="two rounded-pill btn btn-secondary btn-lg" id="keyButton">2</button> </div> <div class="col"> <button class="three rounded-pill btn btn-secondary btn-lg" id="keyButton">3</button> </div> <div class="col"> <button class="addition rounded-pill btn btn-outline-primary btn-lg" id="keyButton" data-key="operator">+</button> </div> </div> <div class="row"> <div class="col"> <button class="plusNegative rounded-pill btn-secondary btn btn-lg" id="keyButton" data-key="operator">+/-</button> </div> <div class="col"> <button class="zero rounded-pill btn btn-secondary btn-lg" id="keyButton">0</button> </div> <div class="col"> <button class="decimal rounded-pill btn btn-secondary btn-lg" id="keyButton" data-key="operator">.</button> </div> <div class="col"> <button class="equal rounded-pill btn btn-primary btn-lg" id="keyButton" data-key="operator">=</button> </div> </div> </div> <.-- Bootstrap Bundle with Popper --> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script> <script src="script.js" type="text/javascript" charset="utf-8"></script> </body> </html>

How do I add the appropriate parentheses " '(' or ')' " to the JavaScript calculator display screen

Question

1 answers

solution1
0 2021-04-27 08:31:55

How do I add the appropriate parentheses " '(' or ')' " to the JavaScript calculator display screen

Question

1 answers

solution1 0 2021-04-27 08:31:55

solution1
0 2021-04-27 08:31:55