Warm tip: This article is reproduced from stackoverflow.com, please click
html javascript

External Javascript Undefined only on Internet Explorer

发布于 2020-03-27 10:28:26

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];
}
Questioner
Mike49
Viewed
16
T.J. Crowder 2019-07-03 23:31

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 '').