-3

For my assignment I'm trying to create a calculator website and in the process of implementing the on and off button of that calculator. I'm working on trying to access the value of the input but keep getting the following error:

assignment_4.html:62 Uncaught TypeError: Cannot read property '0' of null at HTMLButtonElement.buttons.(anonymous function).onclick

<script>
  let buttons=document.querySelectorAll(".col-6");
  for(let i=0; i<buttons.length; i++){
   buttons[i].onclick=function(){
   console.log(buttons[i].innerHTML);
   if(buttons[i].innerHTML=='ON / OFF'){
    console.log(document.getElementById("#display").value);
    if(document.getElementById("#display").value=='OFF'){
     this.value="0"; 
    }

   }
   else{

   }

   } 
  }
 </script>
<body>
 <div class="container">
  <div class="row">
   <h1 class="col-12 text-center mt-5">JS Calculator</h1>
  </div> <!-- .row -->
  <div class="row">
   <div id="calculator" class="mt-4 col-12 col-md-6 ml-md-auto mr-md-auto col-lg-4">
    <div class="row">
     <input type="text" id="display" class="col-12 text-right form-control" value="OFF" disabled>
    </div> <!-- .row -->
    <div class="row">
     <button class="col-6 btn btn-lg btn-outline-dark">ON / OFF</button>
     <button class="col-6 btn btn-lg btn-outline-dark">AC</button>
    </div> <!-- .row -->
    <div class="row">
     <button class="col-3 btn btn-lg btn-outline-dark">7</button>
     <button class="col-3 btn btn-lg btn-outline-dark">8</button>
     <button class="col-3 btn btn-lg btn-outline-dark">9</button>
     <button class="col-3 btn btn-lg btn-outline-dark">/</button>
    </div> <!-- .row -->
    <div class="row">
     <button class="col-3 btn btn-lg btn-outline-dark">4</button>
     <button class="col-3 btn btn-lg btn-outline-dark">5</button>
     <button class="col-3 btn btn-lg btn-outline-dark">6</button>
     <button class="col-3 btn btn-lg btn-outline-dark">x</button>
    </div> <!-- .row -->
    <div class="row">
     <button class="col-3 btn btn-lg btn-outline-dark">1</button>
     <button class="col-3 btn btn-lg btn-outline-dark">2</button>
     <button class="col-3 btn btn-lg btn-outline-dark">3</button>
     <button class="col-3 btn btn-lg btn-outline-dark">-</button>
    </div> <!-- .row -->
    <div class="row">
     <button class="col-3 btn btn-lg btn-outline-dark">0</button>
     <button class="col-3 btn btn-lg btn-outline-dark">.</button>
     <button class="col-3 btn btn-lg btn-outline-dark">=</button>
     <button class="col-3 btn btn-lg btn-outline-dark">+</button>
    </div> <!-- .row -->
   </div> <!-- #calculator -->
  </div> <!-- .row -->
 </div> <!-- .container -->
Alvin Nguyen
  • 250
  • 4
  • 10
user7420589
  • 1
  • 2

3 Answers3

1

You don't need the # when getting the element, since it already expects an ID. Change your call to:

 document.getElementById("display")
Canica
  • 2,650
  • 3
  • 18
  • 34
0

It seems you be you're confusing jQuery with JS. There is no need to use # when using document.getElementById()

e.g. document.getElementById('display');

Chris Tapay
  • 1,004
  • 10
  • 21
0

You need to change the reference of buttons[i] inside of the callback for the event onclick for "this". The reason is that by the time the event happens, the buttons variable is not defined and therefore its throwing an error. 

buttons[i].onclick=function(){
            console.log(this.innerHTML);
...
JIMMYOnline
  • 1
  • You're right!! :) there is a closure on buttons and i variables. However since the for loop has let (block scoped) instead of var I don't think i will be equal to its final value when the loop ends. My only concern is the error that he mentioned "Cannot read 0 of null". I agree with the other accurate responses on having an error in getElementById("#display").value, but this would throw "value of undefined". So for me the only way to reproduce the error '0' of null is in the case that buttons variable somehow had a null value. What do you think? :D – JIMMYOnline Jan 30 '19 at 04:22
  • It's been so long since I used that pattern that I really haven't considered the difference between *var* and *let*, but it seems using *let* that the value of *i* is static, so *buttons[i]* still references the node (i.e. `this == nodes[i]`). I probably knew that once but forgot. So while I though this was a good answer, it seems it's not. :-) The problem is the incorrect ID, so *document.getElementById* returns *null*. – RobG Jan 30 '19 at 04:47