Function does not change the text of an element in IE10-11

Question

I am creating a layout with IE10-11 support. Most of my functions work, but the .text jQuery method does nothing. When I click on the button on my page, the text of some elements should change based on the passed argument to my function. The code:

const currenciesChars = new Map([
  ['rub', '₽'],
  ['usd', '$'],
  ['eur', '€']
])

const currenciesNote = new Map([
  ['rub', 'Руб'],
  ['usd', 'USD'],
  ['eur', 'EUR']
])

function changeCurrency(currency) {
  $(".currency").text(currenciesChars.get(currency))
  $(".currency-note").text(currenciesNote.get(currency))
}

changeCurrency('usd');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="currency"></div>
<div class="currency-note"></div>

The console does not produce a single error. However, the function works if you add alert (123) to it, you can verify this. What is the problem of my code?

`Map` is not supported in IE10. [`new Map(arguments)` is not supported in IE11](http://kangax.github.io/compat-table/es6/#test-Map_constructor_arguments). — Heretic Monkey, Mar 24 '20 at 15:34
That's a good point. Have you polyfilled `Map`? Did you fail to tell us about error messages on the console of the developer tools? — Quentin, Mar 24 '20 at 15:34
You can see the effect of `new Map(arguments)` not being supported in IE11 by visiting https://jsfiddle.net/tz1w5gmx/1/embedded/result,css,html,js with IE11 and look at the console. It should log `[object Object]` for the `Map` variable, and a function for the `Map.get`, but then `undefined` for the result of the `Map.get(key)` call. Basically, IE11 creates an empty `Map` when called with arguments. No errors, just empty :(. I don't have a VM with IE10 handy to test that. — Heretic Monkey, Mar 24 '20 at 15:47
For workarounds in IE11, see [Map(iterable) alternative for IE 11](https://stackoverflow.com/q/59375015/215552) — Heretic Monkey, Mar 24 '20 at 15:49

Yu Zhou · Answer 1 · 2020-03-25T06:04:49.950

As commented above, new Map(arguments) is not supported in IE11. You need to use @babel/polyfill to polyfill it in IE:

Install @babel/polyfill by running the following command:
```
npm install --save @babel/polyfill
```
In the @babel/polyfill npm release, there's a file @babel/polyfill/dist/polyfill.js. You could include it before all your compiled Babel code. You can either prepend it to your compiled code or include it in a <script> before it.
To make your code working in IE 10, you also need to change const to var.

The working code sample is like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="node_modules/@babel/polyfill/dist/polyfill.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="currency"></div>
    <div class="currency-note"></div>
    <script>           
        var currenciesChars = new Map([
            ['rub', '₽'],
            ['usd', '$'],
            ['eur', '€']
        ])

        var currenciesNote = new Map([
            ['rub', 'Руб'],
            ['usd', 'USD'],
            ['eur', 'EUR']
        ])

        function changeCurrency(currency) {
            $(".currency").text(currenciesChars.get(currency))
            $(".currency-note").text(currenciesNote.get(currency))
        }    
        changeCurrency('usd');
    </script>
</body>
</html>

Function does not change the text of an element in IE10-11

1 Answers1