jQuery entspricht in Vanille js

Question

Gebäude JS Rechner wie freecodecamp Front-End-Track. Mein Problem ist, dass ich eine Idee habe, wie dies mit jQuery implementiert werden kann, aber Probleme mit der Umwandlung in reines Javascript hat.

Codepen: https://codepen.io/ekilja01/pen/MoXROe

jQuery:

$("#clear,#clearall").click(function(){ 
     number = ""; 
     totalNumber.text("0"); 
     if ($(this).attr("id") === "clearall") { 
      newNumber = ""; 
     } 
    } 

Ich versuche das, aber es funktioniert nicht

["clear", "clearAll"].forEach.call(function(e){ 
     e.addEventListener("click", function(){ 
      totalNumber.textContent = "0"; 
     }); 
    }); 

js:

document.addEventListener("DOMContentLoaded", function (event) { 
    console.log("DOM OK"); 

    // Declare variables for number, new number and operators 

    var number = ""; 
    var newNumber = ""; 
    var operator = ""; 

    // Declare variable total number to display total on the calculator's display 

    var totalNumber = document.getElementById("total"); 
    totalNumber.textContent = "0"; 

    // Testing if number displayed is longer than 6 digits and if it is - Err to be displayed 
    var testNumLength = function(number) { 
     if (number.length > 6) { 
      number = ""; 
      totalNumber.textContent = "Err"; 
     } 
    } 


    document.getElementById("numbers").addEventListener("click", function(e){ 
     number += e.target.textContent; 
     totalNumber.textContent = number; 
     testNumLength(number); 
    }) 

    var clear = document.getElementById("clear"); 
    var clearAll = document.getElementById("clearall"); 

}) 

    ["clear", "clearAll"].forEach.call(function(e){ 
     e.addEventListener("click", function(){ 
      totalNumber.textContent = "0"; 
     }); 
    }); 

Answer 1

Dieser Code hat einige falsche Annahmen darüber, wie forEah arbeitet

["clear", "clearAll"].forEach.call(function(e){ 
    e.addEventListener("click", function(){ 
     totalNumber.textContent = "0"; 
    }); 
}); 

1. Jedes Array von Array.prototypeforEach Methode geerbt hat, so brauchen Sie nicht forEach.call
2. ["clear", "clearAll"] ist ein Array von Strings zu verwenden (nicht DOM-Elemente), also müssen Sie entweder ein Array von DOM-Elementen konstruieren oder diese Elemente innerhalb von forEach per ID erhalten.

Wählen Sie eine der folgenden Optionen

Wählen Sie Elemente von id und iterieren

var clear = document.getElementById("clear"); 
    var clearAll = document.getElementById("clearall"); 

}) 

    [clear, clearAll].forEach(function(e){ 
     e.addEventListener("click", function(){ 
      totalNumber.textContent = "0"; 
     }); 
    }); 

oder iterieren NodeList Sie erhalten von querySelectorAll

[].forEach.call(document.querySelectorAll('#clear, #clearAll'), function(el) { 
... 
}) 

oder ids iterieren und erhalten Element nach ID

['clear', 'clearAll'].forEach(function(id) { 
    document.getElementById(id).addEventListener('click', ...) 
})