How to stop a called function?

I have a simple calculator. the numbers are seen on the screen when you press to the buttons but the numbers still can see on the screen if you press the buttons even you turn off the calculator after you did some process. how can I fix it?

There are a couple of different ways to achieve this effect.

  • Dynamically add the click event listeners for the buttons when the ON button is clicked and remove them when the OFF button is clicked.

OR

  • Create a state in the app for power (a boolean with true being on and false being off). When a button is clicked only do things when the state of power is true. Otherwise, do nothing.

After reviewing your code, you really need to refactor to remove the massive amount of code duplication your app currently has. I see the following code repeated 5 times:

          if (math.innerHTML[math.innerHTML.length - 1] == "-")
            math.innerHTML += "";
          else if (math.innerHTML[math.innerHTML.length - 1] == "+")
            math.innerHTML += "";
          else if (math.innerHTML[math.innerHTML.length - 1] == "*")
            math.innerHTML += "";
          else if (math.innerHTML[math.innerHTML.length - 1] == "/")
            math.innerHTML += "";
          else if (math.innerHTML[math.innerHTML.length - 1] == ".")
            math.innerHTML += "";
          else if (math.innerHTML == "= ") math.innerHTML += ".";
          else if (result.innerHTML != "") {
            math.innerHTML = "= " + result.innerHTML + ".";
            result.innerHTML = "";
          } else if (math.innerHTML[math.innerHTML.length - 2] == ".")
            math.innerHTML += "";
          else math.innerHTML += ".";
1 Like

yes, it was my first js project, i will try to reduce repetition. thanks

1 Like

I tried to remove event listener at 363. js code line but it’s didn’t work .

You need to name the function you use as the callback for the original addEventListener, so you can reference it when you remove the event listener. You will need to do more than just creating a function though as your function depends on values in the for loop. You will need to make just a few modifications to the function in order to not depend on the i in the for loop. Basically, where ever you reference button[i], you will replace with something else that can be referenced inside the function.

I did some changes the code but still not work well.

Look

               case del.innerHTML:
                    if (math.innerHTML == ""){

                    }
                    else if(result.innerHTML != "") result.innerHTML = "";
                    
                    else 
                        math.innerHTML = math.innerHTML.slice(0, math.innerHTML.length -1);

This is a good hint that you need to get back to basics, and come back later to this project.

Empty if statements, bodging around logic, in my opinion you are not ready for this project.

Implicit “blockless {}” else statements? Please, is like trying to run when you cannot walk.

I am not trying to put you down but rather to encourage you to go back to be comfortable with the basics.

This for example is a crime:

                    else if(math.innerHTML[math.innerHTML.length - 1] == "-")
                        math.innerHTML += "";
                    
                    else if(math.innerHTML[math.innerHTML.length - 1] == "*")
                        math.innerHTML += "";
                    
                    else if(math.innerHTML[math.innerHTML.length - 1] == "/")
                        math.innerHTML += "";

maybe

// -. *, / etc
if(["-","*", "/"].includes(math.innerHTML[math.innerHTML.length - 1] )) {
     math.innerHTML += ""; // you only need to do it once
}

just an example.

The calculator one is a hard one, I suggest you come back to it when you have more understanding otherwise you will only be frustrated.

Only my opinion, take it with a pinch of salt.

I really want to help with your current project but is so unreadable it gives me headache.

ALSO, please try to write a function per functionality.
The buttonValue does way too much and makes it very hard to debug.

That should be split in 5-6 functions probably and then you can inspect easily what goes wrong.

I understand your suggestion and accept that I’m amator in js. But, I think your samples is wrong. You say the code should be like this

 if(["-","*", "/"].includes(math.innerHTML[math.innerHTML.length - 1] )) {
     math.innerHTML += ""; 
}

okay but if I an amateur, how can i code like this?
I think your suggestion code is hard me.
I code like this becase I’m an amateur.

  else if(math.innerHTML[math.innerHTML.length - 1] == "-")
                        math.innerHTML += "";
                    
                    else if(math.innerHTML[math.innerHTML.length - 1] == "*")
                        math.innerHTML += "";
                    
                    else if(math.innerHTML[math.innerHTML.length - 1] == "/")
                        math.innerHTML += "";

I will try to perform your suggestions.

Why don’t you start with the javascript challenges until you are comfortable with conventional coding?

If you get to have the basics about:

  1. Scope, Scope - MDN Web Docs Glossary: Definitions of Web-related terms | MDN, You-Dont-Know-JS/ch1.md at 1st-ed · getify/You-Dont-Know-JS · GitHub, You-Dont-Know-JS/ch2.md at 1st-ed · getify/You-Dont-Know-JS · GitHub

  2. Control flow Control flow - MDN Web Docs Glossary: Definitions of Web-related terms | MDN, Control flow and error handling - JavaScript | MDN

  3. Functions in depth, what is an early return (probably this is the scope of this topic)

  4. DOM api

,then you can dive into projects like the js calculator.

This project is a nasty one, is genuinely hard one.

If you are really keen to do it though, get a working example from codepen and try to understand that already working solution before writing yours.

Hope you see my point.

Yes, I see the point. But I think real problem is that you can’t understanding what your weakness without projects. I completed w3schools js course but you can’t remember all of them without doing some projects / coding. I searched basic js projects and seen this project, actly it worked well to my expectation, it’s just keep write the values to screen even it turn off, i tried to fix that. I will study again the basics.