I have a simple webpage with an external javascript call to help navigate through images in the page. The webpage works perfectly fine on chrome but I am getting an undefined error on Internet Explorer. It seems like IE is unable to find the javascript for some reason.
Here is my html:
<!DOCTYPE html>
<html height="100%" lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous">
<script type="text/javascript" src="http://fullpath.com/Scripts/toggle_images.js"></script>
<meta charset="utf-8">
</head>
<body>
<div class="navigation-bar">
<button class="btn btn-light nav-button" onclick="toggle_images('left')">
<i class="fas fa-caret-left"></i>
</div>
</div>
<div class="center-container">
<div class="image-container">
<img src="http://fullpath.com/Main/img1.png" id="simulatorImageTopLeft"></img>
</div>
<div class="image-container">
<img src="http://fullpath.com/Main/img2.png" id="simulatorImageTopRight"></img>
</div>
<div class="image-container">
<img src="http://fullpath.com/Main/img3.png" id="simulatorImageBottomLeft"></img>
</div>
<div class="image-container">
<img src="http://fullpath.com/Main/animation_left.gif" id="simulatorImageBottomRight"></img>
<img src="http://fullpath.com/Main/animation_right.gif" id="simulatorImageBottomRight"></img>
</div>
</div>
<div class="navigation-bar">
<button class="btn btn-light nav-button" onclick="toggle_images('right');">
<i class="fas fa-caret-right"></i>
</div>
</div>
</body>
</html>
And here is the javascript:
var imageIterator = 0;
function toggle_images(direction='none') {
var IMAGE_SET = [
['img1.png','img2.png','img3.png'],
['img4.png','img5.png','img6.png'],
];
var IMAGE_PATH = 'http:/fullpath.com/Main/'
if (direction == 'right') {
imageIterator = Math.abs(imageIterator + 1) % 4;
} else if (direction == 'left') {
imageIterator = Math.abs(3 + imageIterator) % 4;
}
var IMAGE = document.getElementById("reactor-nav-box").textContent;
document.getElementById("simulatorImageTopRight").src=IMAGE_PATH + IMAGE + '/'+ IMAGE_SET[imageIterator][1];
document.getElementById("simulatorImageTopLeft").src=IMAGE_PATH + IMAGE + '/'+ IMAGE_SET[imageIterator][0];
document.getElementById("simulatorImageBottomLeft").src=IMAGE_PATH + IMAGE + '/'+ IMAGE_SET[imageIterator][2];
}
You're using a default parameter value:
function toggle_images(direction='none') {
// Here ------------------------^^^^^^^
No version of IE supports those, or most other modern JavaScript features.
Instead:
function toggle_images(direction) {
if (!direction) {
direction = 'none';
}
// ...
or
function toggle_images(direction) {
direction = direction || 'none';
// ...
or various other variations. The precise equivalent of a default parameter value would be:
function toggle_images(direction) {
if (typeof direction === "undefined") {
direction = 'none';
}
// ...
but often a falsy check is all you really need (unless you want to allow direction
to be ''
).
That was exactly the issue and it now works. Thanks!