Javascript/HTML Calculator

Question

I'm trying to learn Web Development with Javascript and HTML. My problem is that I'm trying to implement a for loop (2nd method) that do some logic instead of the redudant code (1st method) but I can't seem to get method 2 working. Please see if there is any other mistake in method 2, I rlly don't like the fact typing the id for each button over and over again. Let me know how I can fix or improve method 2, thanks a lot!

UPDATED


            
                
                    
                    
                    
                    
                
            
            

            
                
                    
                    
                    
                    
                
            
            

            
                
                    
                    
                    
                    
                
            
            

            
                
                    
                    
                    
                
            
        
        

            
            
Solution is

some · Accepted Answer

You do not need to create one event listener for every button. It is enough to use ONE on an element that somewhere contains the buttons.

This is an example of how I would start to do what you are trying to do.

function handle(event) {
  // The clicked element is in event.target
  const button = event.target; 
  
  // using the name of the clicked element to determine what to do.
  if (button.name === "digit") {
    const value = Number(button.value);
    console.log("Digit %d was pressed", value);
  }
  else if (button.name === "op") {
    switch(button.value) {
      case "+":{
        console.log("Operator +");
        break;
      }
      case "-":{
        console.log("Operator -");
        break;
      }
    }
  }
  
  
}

const pad = document.getElementById("pad");
pad.addEventListener("click", handle); // Attach ONE click-handler

UPDATE

You requested in a comment a way to use for-loops instead. Here is an example: I'm using querySelectorAll to get all the elements and then for...of to iterate over the array-like result.

The key here is to give all the buttons that have the same meaning something that can be selected. In my example I have set the name-attribute/property on all buttons, "digit" for digits, and "op" for operators, and then use the value-attribute/property to know what the button is supposed to do.

for (const elem of document.querySelectorAll("button[name=digit]")){
  console.log("Digit", elem.value);
}

for (const elem of document.querySelectorAll("button[name=op]")){
  console.log("Operator", elem.value);
}

// With a low-level for-loop
const elements = document.querySelectorAll("button[name=digit]");
const length = elements.length;
for (let index=0; index < length; index += 1) {
  const elem = elements[index];
  console.log("Long way to get the value of digit",elem.value);
}

Let us go though your code

    obj = document.querySelectorAll("#num");
    // You start by asking for all elements with an id of "num".
    // querySelectorAll returns a static node list with matching
    // elements. An id should be unique in a document. So there should only
    // be ONE matching element. 




    obj.onclick = function() 
    // here you try to add a click handler to obj. But obj is not an
    // element. It is a list of nodes. 


    { 
        // this for-loop looks alright....
        for (let i = 1; i < obj.length; i++)
        {
            // But here you are trying to add eventlisteners inside a
            // an eventlistener. You don't want to add that on every
            // click. 
            obj[i].addEventListener('click', () => {
                // Here you are using getAttribute, but you don't need that.
                console.log(obj[i].getAttribute('value'))
                // You can access value as a property:
                // console.log(obj[i].value)
            })
        }
    }

Looking at your other atempt:

const num = document.getElementById("num");
// Now you are using getElementById, that will give you the
// node of your outer div. That is a good start, but you
// don't get the individual buttons.


const length = num.length;
obj.onclick = function() 
{ 
    // you are starting with 1, but javascript is it 0 based.
    for (let i = 1; i < length; i++)
    {
        num.addEventListener("click")
    }
}

What you could do (untested, might contain errors):

// Get a static node list of all buttons.
const buttons = document.querySelectorAll("input[type=button]");
const length = buttons.length;

// event handler that will be called when a button i clicked.
function handle(event) {
  const value = event.target.value;
  switch ( value ) {
     case "+" :
      console.log("+ was clicked");
      break;
    default:
      console.log("%s was clicked", value);
  }
}

// Adding the event handler to the buttons.
for( let i = 0; i < length; i++) {
  buttons[i].addEventListener("click", handle);
}

Javascript/HTML Calculator

Answers (2)

Related Questions