CODEWITHSUNDEEP
javascriptcalculator
firelotus1
firelotus1

Reputation: 25

Issues with building out a Javascript Calculator

I'm trying to create a simple javascript calculator with divide, multiple, subtract, add, clear, equals, and decimal buttons.

I can't seem to figure out how to add a cell for divide/multiply and decimal.

Any help in trying to resolve this would be greatly appreciated.

function calculate(numEntered) {
  if (numEntered == 'C') {
    document.getElementById('answer').value = '';
  } else if (numEntered == '=') {
    document.getElementById('answer').value = eval(document.getElementById('answer').value);
  } else {
    document.getElementById('answeralue') += numEntered;
  }
}
table,
td {
  border: 1px solid #000000;
}

td {
  cursor: pointer;
}
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>

<body>
  <table>
    <tbody>
      <tr>
        <td colspan="3"><input type="text" id="answer" disabled=""></td>
        <td onclick="calculate('C');">C</td>
      </tr>
      <tr>
        <td onclick="calculate(1);">1</td>
        <td>2</td>
        <td>3</td>
        <td onclick="calculate('+')">+</td>
      </tr>
      <tr>
        <td onclick="calculate(4);">4</td>
        <td>5</td>
        <td>6</td>
        <td onclick="calculate('-')" ;>-</td>
      </tr>
      <tr>
        <td onclick="calculate(7);">7</td>
        <td>8</td>
        <td>9</td>
        <td onclick="calculate('=')" ;>=</td>
      </tr>


    </tbody>
  </table>
</body>

</html>

Upvotes: 0

Views: 86

Answers (2)

mplungjan
mplungjan

Reputation: 178403

If you delegate, it is easier to handle the contents of each cell

I also fixed your error in

document.getElementById('answeralue') += numEntered;

which had the wrong ID and needed a .value

const nums = "1234567890";
const oper = "*/+-.";
const actions = "C";
document.getElementById("calc").addEventListener("click",function(e) {
  const char = e.target.textContent;
  if (char == 'C') {
    document.getElementById('answer').value = '';
    return;
  } 
//  if (oper.includes(char)) {  // for later
  if (char === "=") {
    document.getElementById('answer').value = eval(document.getElementById('answer').value);
    return
  }  
  else document.getElementById('answer').value += char.trim(); // the trim handles empty cells
});
table,
td {
  border: 1px solid #000000;
}

td {
  cursor: pointer;
  min-width: 30px;
}
<table>
    <tbody id="calc">
      <tr>
        <td colspan="3"><input type="text" id="answer" disabled=""></td>
        <td>C</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>+</td>
        <td>-</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>*</td>
        <td>/</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>=</td>
        <td>.</td>
      </tr>
    </tbody>
  </table>

Upvotes: 0

Michał Łuczak
Michał Łuczak

Reputation: 198

You just need to add a row with the rest of the operators * - multiplication, / - division, and decimal point - .

 <tr>
        <td onclick="calculate('*');">*</td>
        <td onclick="calculate('/');">/</td>
        <td onclick="calculate('.');">.</td>
</tr>

EDIT: This of course doesn't check if you've placed the operator in an appropriate place.

There's typo in your js code:

    document.getElementById('answeralue') += numEntered; // should be ...('answer').value +=...

Also, be aware that eval may open your project for code injection and is really slow.

Upvotes: 1

Related Questions