簡體   English   中英

JavaScript事件監聽器在錯誤的元素上工作?

[英]Javascript Event Listener working on wrong element?

我正在用JavaScript制作計算器。 當我單擊添加按鈕之類的按鈕時,減去它就是調用刪除按鈕的功能。 我的邏輯是先檢查id,然后相應地調用該函數。 即使所有按鈕具有不同的id,del id條件代碼也正在運行。

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");
                }
            }
        })
}

您正在使用賦值運算符而不是比較

 else if (attr="del")

它應該是

 else if (attr=="del")

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM