Okay so I built a calculator ui in pure html and css and now what to add functionality in vanilla javascript

I am not asking you to HELP me build this functionality for my calculator UI. I am asking you would do to research about how to build the functionality for a basic desktop calculator if you did not have a clue about how to build the functionality of the basic desktop calculator. Would you ever go to stackoverflow and look at the functionality of other basic desktop calculators that others have build?

Would you look at the code for an online calculator?

I have now added button and operations classes to my project. I now want to know if such button classes and operations ids are feasible in aiding me in making my calculator :add, substrate, divide and multiply. I want to add/subtract/divide/multiply more than two numbers. My main go is not to find the most elegant and effective solution at the moment; my main goal is to get my code to work.

You mean a data structure like an array?

Sorry I know I said I wasn’t going to ask anyones help with the project, but I am kind of struggling with this now. I didn’t create a new post because this post is related to me topic.

I incorporated your suggestion and added the array to my project. I was trying to get my numbers to display on my caluclator , but so far I have not been able to get any number I type to display on the screen of my calculator.https://codepen.io/noblegas/pen/abzvjWO

Here is a start to get you moving forward. Your current code is:

var button=document.getElementsByTagName('button');
button.addEventListener('click',function(){
    add();
});
function add(){
    var total=0;
    for(var i=0; i<num.length;i++){
        total+=Number(num[i].value);
    }
    display_screen.innerHTML=total;
}

your button variable is an Array of all the buttons. There are 17 total that you have.

var button=document.getElementsByTagName('button');
button[0].addEventListener('click',function(){
add();
});
function add(){
    display_screen.value='test';
}

I altered your code to show getting the display to update. This adds the ‘click’ event to button[0] or “Clear”. display_screen.innerHTML was changed to display_screen.value because there is no html inside of the display (it’s an input currently).

With this change, if you press clear the display will change to ‘test’

Play around with trying to pass the button pressed information into this.

There are many ways to make a calculator, and with all projects making them is the best way to learn.

My best suggestion is that if at any point you feel the need to write out all 17 buttons to be unique, take a step back and look into other options and Array Methods. Imagine you had 1,000 buttons :slight_smile:

Hope this helps without any spoilers, happy coding!

I changed by ids from 17 buttons to five buttons that I would be using for my code. https://codepen.io/noblegas/pen/abzvjWO

I also changed it so that when I press a particular button, the number on the button I press should display that numbere, but that isn’t the case.

Here is another hint:

“The Document method querySelector() returns the first Element within the document” … I’m thinking you want to select All of them.


(note the “Return Value” content)

You are on a good approach with making all of the buttons click with a loop:

for(let i=0; i<num.length; i++){
     num[i].addEventListener('click',function(){
         display_screen.value=num.value;
     })
}

But, num.value is going to be undefined since num is an array of all the buttons … num[3].value for example should be valid

Thanks. I’ll work in this for a while and if I am still stumped, can I still ask for help?

Absolutely. Just keep posting your progress with updated codepen example here or start a new topic with how you are stuck and I’m sure someone will take a look.

Happy coding!

I been working on this issue for quite a while and yet can’t seemed to fix the issue. Everytime I click on one of the number buttons on my calculator, the word ‘undefined’ displays instead of the actual number. Like everytime I click the button “7” or the button “2” and so on, I get “undefined” instead of a 7 or a two.

I realized that my querySelectAll tag( I think ) is a NodeList and since I cannot iterate over a Nodelist , I need to convert it to an array.

So I did that but instead of getting the “undefined”, I get “[object HTMLButtonElement]” in the display screen of my calculator.

Updated my function yet again. I added this function and I still get the ‘undefined’ result:

"//Covert NodeList into an array
Array.from(num).forEach(function(el){
for(let i=0; i<el.length; i++){
el[i].addEventListener(‘click’,function(){
display_screen.value=num.value;
})

}

})"

updated the code to include an event.target.value and I am still getting undefined in the display screen.

I somewhat fixed the issue and by removing my forloop and now my function looks like this :
//Covert NodeList into an array
Array.from(num).forEach(function(el){

    el.addEventListener('click',function(event){
        display_screen.value=event.target.value;
    })

})

It doesn’t display ‘undefined’ anymore and displays the numbers on the buttons that I clicked on. The problem is now, when I press any number, it doesn’t continue to add that ad more on those numbers on my screen as I continue to press that button. Like when I press 7 fivee times, I should see ‘77777’ across the display screen.

FIXED THE ISSUE.

Turned out that I needed to INCREMENT display_screen.value:

Array.from(num).forEach(function(el){

    el.addEventListener('click',function(event){
        display_screen.value+=event.target.value;
    })

})

I want to ask can I create another post later and ask about adding my numbers if I run into any issues with adding? I don’t want this post to get TOO long and I have a different set of subproblems that I am dealing with in this project.

okay. I will come back if I have a problem with adding two or more numbers together

Now I am working on a function for my calculator that clears the contents in the display of my calculator.

My browser console is telling me that reset is not a function even though I went to stack overflow and the users there said that reset was a function. Here is the code for this project:

clearBtn.addEventListener(‘click’,function(){
console.log(“Clear button works”);
clearDisplay();
});

function clearDisplay(){
let resetnow=document.querySelector(’.display_screen’).reset();
return resetnow;

}

Fixed that issue. Turns out that I should have set the display_screen.value=’ '; and put it in my clear button. Now onto getting the function to add.

1 Like

I am having issues with adding as many numbers as I want for my add function.(I have not worked on the functions for the other three operators just yet.) I am not sure what to do with the equals button. I made a switch stateent that gives users the option to choose which operation . Here is the link to the latest update for my code.

It prints my NodeList when I display console.log(num).

So do I again need to convert the Nodelist into an array before looping through the values as I enter each numbmer