CODEWITHSUNDEEP
javascriptjqueryhtml
Edgar Kiljak
Edgar Kiljak

Reputation: 1190

jQuery equivalent in vanilla js

Building JS calculator as per freecodecamp front end track. My problem is that I have an idea how this can be implemented by using jQuery, but having problems with turning it into pure javascript .

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

jQuery:

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

I'm trying this, but it doesn't work

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

Upvotes: 0

Views: 332

Answers (1)

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

This code has some wrong assumptions about how forEah works

["clear", "clearAll"].forEach.call(function(e){
    e.addEventListener("click", function(){
        totalNumber.textContent = "0";
    });
});
  1. Every array has forEachmethod inherited from Array.prototype so you don't need to use forEach.call
  2. ["clear", "clearAll"] is an array of strings (not DOM elements) so you need to either construct an array of DOM elements or get those elements by id inside forEach method.

Pick one of the following options

Select elements by id and iterate

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

})  

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

or iterate over NodeList you get from querySelectorAll

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

or iterate over ids and get element by id

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

Upvotes: 1

Related Questions