Why does the javascript I used to show/hide divs not work in IE?

I modified a script I found on stackoverflow posted by @dinindu which seems to work perfectly on all browsers except IE, and unfortunately we do have clients that still use IE. Any ideas on a workaround for IE?

I'm a technical writer with no knowledge of javascript so please bear with me.

Here's the script in my project:

function toggle_visibility(id) {
    const target = document.getElementById(id);
    if (!target) return;

    // Hide all other div elements.
    const divs = document.querySelectorAll('.div');
    for (const div of divs) {
    div.style.display = 'none';
}

  // Show selected one
target.style.display = 'block';
}

<div id="intro" class="div">
    <img src="../../Resources/Images/101-intro.jpg" title="Inventory Cycle" usemap="#map1" />
    <map id="map1">
        <area shape="rectangle" coords="480,506,564,522" dragDirection="0" href="#" onclick="toggle_visibility('transfer');" />
        <area shape="rectangle" coords="628,288,738,304" dragDirection="0" href="#" onclick="toggle_visibility('receive');" />
    </map>
</div>
<div id="transfer" class="div" style="display: none;">
    <img src="../../Resources/Images/101-transfer.jpg" title="Transfer" usemap="#map2" />
    <map id="map2">
        <area shape="circle" coords="961,36,15" dragDirection="0" alt="Back" href="#" onclick="toggle_visibility('intro');" />
    </map>
</div>
<div id="receive" class="div" style="display: none;">
    <img src="../../Resources/Images/101-receive.jpg" title="Supplier" usemap="#map3" />
    <map id="map3">
        <area shape="circle" coords="961,36,15" dragDirection="0" alt="Back" href="#" onclick="toggle_visibility('intro');" />
    </map>
</div>

The code basically displays only 101-intro.jpg. Clicking on a certain part of the image hides the image and displays one of the other two images (101-transfer.jpg or 101-receive.jpg). Clicking on the top right corner of 101-transfer.jpg or 101-receive.jpg hides it and displays 101-intro.jpg once again.

Solution

Your script uses ES6 (EcmaScript 2015) features, that are not available in IE11 or lower. I've rewritten your function to work with older Javascript versions below, this should work in IE11.

function toggle_visibility(id) {
    var target = document.getElementById(id);
    if (!target) return;

    // Hide all other div elements.
    var divs = document.getElementsByClassName('div');
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.display = 'none';
    }

    // Show selected one
    target.style.display = 'block';
}

Generally, you can use a tool such as babel for transpiling ES6+ code into IE11 compatible ES5 code.

Also if something like this comes up in the future, you can use an online babel transpiler such as babeljs.io/repl, here you can convert the code as well, without being required to know how to transpile it yourself.