Javascript Event Listener working on wrong element?

Question

I am making a calculator in javascript. And when ever I clicked the buttons like add,subtract it is calling the function of delete button. My logic is to check the id first and then call the function accordingly. And even if all buttons have different id, del id condition code is running.

HTML

   <div  class="row" id="first-row">
       <div class="btn red-btn" id="ac">
           <p class="text shift-left-sm">AC</p>
        </div>
        <div class="btn red-btn" id="del">
           <p class="text shift-left-sm">DE</p>
        </div>
        <div class="btn" id="/">
           <p class="text number">÷</p>
        </div>
        <div class="btn rightmost" id="*">
           <p class="text number">x</p> 
        </div>
    </div>

Javascript

 const text = document.querySelector("#header-text");
    const buttons = document.querySelectorAll(".btn");
    const numbers =['1','2','3','4','5','6','7','8','9','0'];
    const mathFunc =['ac','del','/','*','-','+','.','equal'];

    let displayText ='0';
    const firstLetterZeroReg =/0\b/;

    for(var i=0;i<buttons.length;i++){
        buttons[i].addEventListener('click',function(e){

            let attr = this.getAttribute('id');
            // when you are pressing a number button
            if(numbers.includes(attr)){
                if(attr=="0" && lastLetterOfText() =="0"){
                    //if initially it is zero and you are trying to add more zero. it will stop that
                    return;
                }
                if(displayText.match(firstLetterZeroReg)){// regular expression is used which is not necessary at all. Just lazy to remove it
                    //If initially it is zero and you press the first button zero is erased
                    displayText =attr;
                    UpdateDisplay();
                    return;
                }
                displayText+=attr;
                UpdateDisplay();
            }else{
                //when you are pressing a function button
                // console.log(attr);
                // console.log(displayText);
                if(attr=="ac"){
                    EraseEverything();
                }else if(attr="del"){
                    //removes the last letter typed




                    //PROBLEM IS IN THIS LINE
                    // This line is being called for other attr too





                    Del();
                }else if(attr!=lastLetterOfText()){
                    //merely checks if we are not pressing the same button twice 
                    console.log("this also being called");
                    if(attr==="."){
                        displayText+=attr;
                        console.log(displayText);
                        UpdateDisplay();
                    }
                }else{
                    console.log("SOme other button is pressed");
                }
            }
        })
}

this doesn't point to the element in question. That's a jQuery thing. You need to use e.target instead. — user47589
– user47589, Commented Jan 18, 2018 at 16:14
@AmyThanks for that. But It is working for numbers buttons like 1,2,3 and this.getattr does work — Samrat Luitel
– Samrat Luitel, Commented Jan 18, 2018 at 16:18

kng · Accepted Answer · 2018-01-18 16:21:13Z

2

You're using an assignment operator instead of comparison

 else if (attr="del")

It should be

 else if (attr=="del")

answered Jan 18, 2018 at 16:21

kng

6273 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript Event Listener working on wrong element?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related