Rewriting function using arrow function to fix IE compatibility

Question

I don't usually write in javascript and have wrote myself into a bit of a problem. I wrote the following bit of code to interact with some online donation software so that when someone clicks on a donation amount button (.amountNum input[type='radio']) on a donation page, it prints how much the total donation will be if they cover the processing fee. Which worked... in every browser except internet explorer. Turned out arrow functions don't work in IE, and I don't know how to rewrite the function without it. Any pointers?

var inputs = document.querySelectorAll(".amountNum input[type='radio']");

inputs.forEach(el =>
el.addEventListener('click', function() {
  var value = parseInt(this.value, 10);
  var URL = `https://example.com/display-fee?contribution=${value}&max=2500.00`;
  jQuery.get(URL, function(data) {
    var fee = data.fee;
    var total = fee + value;
    total = total.toFixed(2);
    $("#full-gift-label")[0].innerText = ("I'd like to help cover the transaction fees on my donation. My grand total will be £" + total);
  })
}));

How many `.amountNum`s are there in your HTML? Is there exactly one, or many? — CertainPerformance, Nov 26 '18 at 09:41

CertainPerformance · Accepted Answer · 2018-11-26T09:54:11.780

In this case, the arrow function performs identically to a standard function - just replace the el => with function(el) {.

But, there's another problem: if you want to support IE, querySelectorAll returns a NodeList, and only on newer browsers can you forEach directly over a NodeList. So, you'll have to use Array.prototype.forEach instead.

In addition to that, template literals aren't supported by IE either, so use ordinary string concatenation instead:

var inputs = document.querySelectorAll(".amountNum input[type='radio']");

Array.prototype.forEach.call(
  inputs,
  function(el) {
    el.addEventListener('click', function() {
      var value = parseInt(this.value, 10);
      var URL = 'https://example.com/display-fee?contribution=' + value + '&max=2500.00';
      jQuery.get(URL, function(data) {
        var fee = data.fee;
        var total = fee + value;
        total = total.toFixed(2);
        $("#full-gift-label")[0].innerText = ("I'd like to help cover the transaction fees on my donation. My grand total will be £" + total);
      })
    })
  }
);

In the general case, it's best to use Babel to automatically transpile your code from the latest and greatest version of the language down to ES5 automatically, allowing you to write code with the most ease, and for older browsers to be able to understand it:

https://babeljs.io/repl/

Ah, see I'd tried just rewriting to a standard function but when it didn't work (probably because the the forEach issue you've flagged) I assumed there was something else at play. I'm now left with the issue that IE doesn't seem to like the backticks I've used around the var URL? — Georgia O'Brien, Nov 26 '18 at 09:47
Yes, that's a "template literal" which is another ES6 feature (therefore unsupported in IE). In this case you can just do `var URL = "https://example.com/display-fee?contribution="+value+"&max=2500.00";` — Robin Zigmond, Nov 26 '18 at 09:50

Rewriting function using arrow function to fix IE compatibility

1 Answers1