CODEWITHSUNDEEP
javascripthtmlcalculator
Omar Mostafa Abubakr
Omar Mostafa Abubakr

Reputation: 3

JavaScript Calculator buttons don't respond (buttons don't write their value on the calculator's screen) when they are pressed

I was trying to make a calculator using JavaScript but when I click any button I don't get any response (the buttons don't write their values on the calculator's screen) my text editor (vs code) didn't show any errors but when I inspected it from my browser, it showed me this error:

Uncaught TypeError: Cannot read property 'value' of null
at index.html:29

I don't understand what that error is or how I can fix it

My code: 

var num1 = document.getElementById("1");
var num2 = document.getElementById("2");
var num3 = document.getElementById("3");
var num4 = document.getElementById("4");
var num5 = document.getElementById("5");
var num6 = document.getElementById("6");
var num7 = document.getElementById("7");
var num8 = document.getElementById("8");
var num9 = document.getElementById("9");
var num0 = document.getElementById("0");
var dot = document.getElementById("dot");
var clear = document.getElementById("resetbtn");
var calculatebtn = document.getElementById("calculatebtn");
var screen = document.getElementById("screen");
var plus = document.getElementById("plus");
var minus = document.getElementById("minus");
var multiply = document.getElementById("multiply");
var divide = document.getElementById("divide");
num1.onclick = screen.value += 1;
num2.onclick = screen.value += 2;
num3.onclick = screen.value += 3;
num4.onclick = screen.value += 4;
num5.onclick = screen.value += 5;
num6.onclick = screen.value += 6;
num7.onclick = screen.value += 7;
num8.onclick = screen.value += 8;
num9.onclick = screen.value += 9;
num0.onclick = screen.value += 0;
dot.onclick = screen.value += ".";
clear.onclick = screen.value = "";
calculatebtn.onclick = eval(screen.value);
plus.onclick = screen.value += "+";
minus.onclick = screen.value += "-";
multiply.onclick = screen.value += "*";
divide.onclick = screen.value += "/";
<table border="0" cellpadding="10px" cellspacing="30px;">
  <br /><br />
  <tr>
    <td>
      <input style="width: 99%;background-color:transparent;font-size:60px;text-align:center" id="screen" />
    </td>
  </tr>
  <tr>
    <td>
      <button style="color: red;" id="resetbtn">C</button>
      <button id="plus" style="width: 15%;color:orange">+</button>
      <button id="minus" style="width: 15%;color:orange">-</button>
      <button style="width: 15%;;color:orange" id="multiply">x</button>
      <button id="divide" style="width: 15%;;color:orange">÷</button>
    </td>
  </tr>
  <tr>
    <td>
      <button id="1">1</button> <button id="2">2</button>
      <button id="3">3</button> <button id="4">4</button>
      <button id="5">5</button>
    </td>
  </tr>

  <tr>
    <td>
      <button id="6">6</button> <button id="7">7</button>
      <button id="8">8</button> <button id="9">9</button>
      <button id="0">0</button>
    </td>
  </tr>

  <tr>
    <td>
      <button id="dot">.</button>
      <button style="width: 70%;color:seagreen" id="calculatebtn">=</button>
    </td>
  </tr>
</table>

Upvotes: 0

Views: 265

Answers (1)

lejlun
lejlun

Reputation: 4419

You are getting the error Uncaught TypeError: Cannot read property 'value' of null because one or more of your selectors cannot find a match from the loaded elements

  • you can fix this by enclosing your code in a window.onload event listener like this:
window.addEventListener('load', () => {
    ... the rest of your javascript here.
});
  • Or by moving your script tag to the bottom of your body after the content has been loaded:
<body>
... html code here
<script src="./yourfile.js"></script>
</body>

Even after you have fixed this your code will still throw errors because of your usage of .onclick. The .onclick property must be a function that can be called every time an element is clicked. So using vim I changed every occurrence of this:

num1.onclick = screen.value += 1;

To this:

num1.onclick = () => (screen.value += 1);

Full code below:

var num1 = document.getElementById("1");
var num2 = document.getElementById("2");
var num3 = document.getElementById("3");
var num4 = document.getElementById("4");
var num5 = document.getElementById("5");
var num6 = document.getElementById("6");
var num7 = document.getElementById("7");
var num8 = document.getElementById("8");
var num9 = document.getElementById("9");
var num0 = document.getElementById("0");
var dot = document.getElementById("dot");
var clear = document.getElementById("resetbtn");
var calculatebtn = document.getElementById("calculatebtn");
var screen = document.getElementById("screen");
var plus = document.getElementById("plus");
var minus = document.getElementById("minus");
var multiply = document.getElementById("multiply");
var divide = document.getElementById("divide");

num1.onclick = () => (screen.value += 1);
num2.onclick = () => (screen.value += 2);
num3.onclick = () => (screen.value += 3);
num4.onclick = () => (screen.value += 4);
num5.onclick = () => (screen.value += 5);
num6.onclick = () => (screen.value += 6);
num7.onclick = () => (screen.value += 7);
num8.onclick = () => (screen.value += 8);
num9.onclick = () => (screen.value += 9);
num0.onclick = () => (screen.value += 0);
dot.onclick = () => (screen.value += ".");
clear.onclick = () => (screen.value = "");
calculatebtn.onclick = () => (screen.value = eval(screen.value));
plus.onclick = () => (screen.value += "+");
minus.onclick = () => (screen.value += "-");
multiply.onclick = () => (screen.value += "*");
divide.onclick = () => (screen.value += "/");
<table border="0" cellpadding="10px" cellspacing="30px;">
  <br /><br />
  <tr>
    <td>
      <input style="width: 99%;background-color:transparent;font-size:60px;text-align:center" id="screen" />
    </td>
  </tr>
  <tr>
    <td>
      <button style="color: red;" id="resetbtn">C</button>
      <button id="plus" style="width: 15%;color:orange">+</button>
      <button id="minus" style="width: 15%;color:orange">-</button>
      <button style="width: 15%;;color:orange" id="multiply">x</button>
      <button id="divide" style="width: 15%;;color:orange">÷</button>
    </td>
  </tr>
  <tr>
    <td>
      <button id="1">1</button> <button id="2">2</button>
      <button id="3">3</button> <button id="4">4</button>
      <button id="5">5</button>
    </td>
  </tr>

  <tr>
    <td>
      <button id="6">6</button> <button id="7">7</button>
      <button id="8">8</button> <button id="9">9</button>
      <button id="0">0</button>
    </td>
  </tr>

  <tr>
    <td>
      <button id="dot">.</button>
      <button style="width: 70%;color:seagreen" id="calculatebtn">=</button>
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions