Why doesnt my code for my calculator work?

Question

I have some uncompleted code that's suposed to return a number for what ever button I click but instead it does nothing and the console doesnt throw an error so that i cant see what i did.

Ive done some spell checking and my code comes mainly form a youtube video.

const minus = document.querySelector('[data-delete]');
const current = document.querySelector('[data-input]');
const allClear = document.querySelector('[data-all-clear]');
const numberButtons = document.querySelectorAll('[data-number]')
const operation = document.querySelectorAll('[data-operation]')  
const equals =document.querySelector('[data-equals]')

class Calc {
    constructor(inputText){
        this.inputText = current
        this.clear()
    }
    clear(){
        this.input=''
        this.operation=undefined
    }
    delete(){

    }
    writeNumber(num){
        this.input = num
    }
    operation(sign){

    }
    compute(){

    }
    updateDisplay(){
        this.input.innerText = this.operation
    }
}
const calculator = new Calc(current);

numberButtons.forEach(number=>{
equals.onClick('click',()=>{
    calculator.appendNumber(equals.innerText)
    calculator.updateDisplay()
})
}) 

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <link href="calc.css" rel="stylesheet">
    <script src="calc.js"></script>
  </head>
  <body>
  <div class="container-grid">
      <div data-input class="input">3</div>
      <button data-all-clear class="span-two">AC</button>
      <button data-delete>DEL</button>
      <button data-operation>/</button>
      <button data-number>1</button>
      <button data-number>2</button>
      <button data-number>3</button>
      <button data-operation>*</button>
      <button data-number>4</button>
      <button data-number>5</button>
      <button data-number>6</button>
      <button data-operation>+</button>
      <button data-number>7</button>
      <button data-number>8</button>
      <button data-number>9</button>
      <button data-operation>-</button>
      <button data-number>.</button>
      <button data-number>0</button>
      <button data-equals class = "span-two">=</button>
  </div>
   <script src="calc.js"></script>
  </body>
</html>

I just want the buttons to display numbers

no but i moved it down there and my file still does the smame thing — , Jul 24 '19 at 02:28
I just updated it. you'll find the HTML under the javascript — , Jul 24 '19 at 02:34
I am able to run your code, let me know if this helps! @liamrobertson — Kannan G, Jul 24 '19 at 02:57

Jonathan Beadle · Answer 1 · 2019-07-24T04:13:11.643

JS Fiddle Answer : https://jsfiddle.net/xa14fbc0/

So I'm not quite sure what you're trying to achieve here but I'll point out a few things that might help.

Are you trying to make your element with data-equals show the number button you click on?

your function

numberButtons.forEach(number=>{
    equals.onClick('click',()=>{
        calculator.appendNumber(equals.innerHTML)
    })
})

needs some work, you wouldn't use use onClick('click'... instead you would use addEventListener('click'... to attach a handler (using .click to attach an on click handler is jQuery and you do not have jQuery setup in your code - might be something to look at). Furthermore, you are attaching the on click to the equals element each time over and over again, not to your buttons. For that you would do number.addEventListener('click'... to attach a click handler to each of your buttons so an action takes place each time you click. You also are calling a method calculator.appendNumber but your calculator class doesn't have an appendNumber method in it.

What you are looking for is something along the lines of :

numberButtons.forEach(number=>{
    number.addEventListener('click',()=>{
        calculator.appendNumber(number.innerText)
        calculator.updateDisplay()
    })
})

you also want to add an appendNumber method to your Calc class or call a method that is available in your Calc class

You are also instantiating calculator with current which is a dom element, but your Calc class constructor is looking for inputText so what you want there is something like :

const calculator = new Calc(current.value)

in order to pass in the value of your input - keep in mind that constructors get instantiated with the value at the time of instantiation and will not change as you change your input value - you'd need to attach an on change handler to your input in order for your class instance to make a change when that input value changes

I've made a JS fiddle that changes the input to a number you click to get you started, based on your code : https://jsfiddle.net/xa14fbc0/

thank you so much for the code. it worked. the value property is the equivalent to the jquery .val() right? — , Jul 24 '19 at 05:30
Noproblem! And yeah, alternatively you could use the jquery .val() — Jonathan Beadle, Jul 25 '19 at 00:12
ok. Imy going to need more help buliding the calculator though. So what i need next is for the numbers to continue like a loop. To do that the writeNumber method has to turn a number to a string. Here's what it looks like:writeNumber(num){ this.input = this.input.toString + num.toString() } — , Jul 25 '19 at 03:43

score 0 · Answer 2 · answered Jul 24 '19 at 02:55

I am able to run your code after doing the below change,

wrap everything inside one method,
you are having an issue with the below click event,

Incorrect one,

equals.onClick('click',()=>{
    calculator.appendNumber(equals.innerText)
    calculator.updateDisplay()
})

If you dont want jQuery use javascript click event bind()

equals.addEventListener("click",()=>{
    calculator.writeNumber(equals.innerText)
    calculator.updateDisplay()
})

Refer the below updated your function

function Calci() {
    let minus = document.querySelector('[data-delete]');
    let current = document.querySelector('[data-input]');
    let allClear = document.querySelector('[data-all-clear]');
    let numberButtons = document.querySelectorAll('[data-number]')
    let operation = document.querySelectorAll('[data-operation]')  
    let equals =document.querySelector('[data-equals]')

    class Calc {
        letructor(inputText){
            this.inputText = current
            this.clear()
        }
        clear(){
            this.input=''
            this.operation=undefined
        }
        delete(){ }
        writeNumber(num){
            this.input = num
        }
        operation(sign){

        }
        compute(){  }
        updateDisplay(){
            this.input.innerText = this.operation
        }
    }
    let calculator = new Calc(current);

    numberButtons.forEach(number=>{
    equals.addEventListener("click",()=>{
        calculator.writeNumber(equals.innerText)
        calculator.updateDisplay()
    })
    }) 
}

Calci(); //call the method

i dont know if it's the browser, but i commented out my javascript and pasted yours and the same thing happened. wierd huh? — , Jul 24 '19 at 04:16
yes it wont because in your code you are not doing any operation / broken operation updateDisplay(){ // this.input.innerText = this.operation } comment this method and do console.log('check') i tried putting breakpoint to see whether click works — Kannan G, Jul 24 '19 at 04:37
Ok i'll do that with the code tomorrow. Thanks for the help and your patience. — , Jul 24 '19 at 04:44
dont worry, let me work on your example and give you the code snippet with details :) — Kannan G, Jul 24 '19 at 04:44

Why doesnt my code for my calculator work?

2 Answers2