0

I have a JavaScript code that toggles between DIV's on-click, but it doesn't work on IE (v.11.4) and I can't seem to understand what part is not suitable for IE..

Below is the simplified version of my code. For some reason it didn't work on jsfiddle but if you copy it in a plain html file it works fine on Chrome and Firefox, but not IE..

<!doctype html>
<html>
<head>
    <title>Test</title>
    <meta charset="UTF-8">
</head>
<body>
<style>
.holder>div {
  display: none;
}

[dir=second]>.txt2,
[dir=first]>.txt1 {
  display: block;
}

.holder_2>div {
  display: none;
}

[dir=second_2]>.txt2_2,
[dir=first_2]>.txt1_2 {
  display: block;
}
</style>
<div class="container1">
  <button onclick="toggle('first')" class="clickme">Some text</button>
  <button onclick="toggle('second')" class="clickme">Some other text</button>

    <div class="holder">
      <div class="txt1">
        <h1>Some content here</h1>
      </div>    
      <div class="txt2">
        <h1>Some different content here</h1>
       </div>
    </div>
</div>

<div class="container2">
  <button onclick="toggle_2('first_2')" class="clickme">Some text</button>
  <button onclick="toggle_2('second_2')" class="clickme">Some other text</button>

    <div class="holder_2">
      <div class="txt1_2">
        <h1>Some content here</h1>
      </div>    
      <div class="txt2_2">
        <h1>Some different content here</h1>
       </div>
    </div>
</div>

<script>
var holder = document.querySelector(".holder");

function toggle(val) {
  holder.setAttribute('dir', val);
}

var holder_2 = document.querySelector(".holder_2");

function toggle_2(val) {
  holder_2.setAttribute('dir', val);
}
</script>
</body>
</html>

Is it possible that the problem could even be in the CSS? All works well with Chrome and Firefox.

2 Answers2

1

Solved by using type="text/css" instead of type="css/stylesheet" when importing the stylesheet. Or you can just remove the type=...

Also, add a DOCTYPE!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Either HTML5 or HTML4 Strict (not Transitional) are recommended for best cross-browser support. The doctype declaration should be the first thing in the html file. It goes even before the tag.

And the end go to this website to valid your website and fix the problem https://validator.w3.org/

KC-L
  • 49
  • 1
  • 10
  • I already have type="text/css" in my original code, not "css/stylesheet".. Adding "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" to my doctype didn't solve the problem. –  Oct 29 '19 at 12:59
  • @veskimati & KC-L - Use HTML5: ` `. It's been many years since 4.01 was still an appropriate choice. – T.J. Crowder Oct 29 '19 at 13:05
  • I am using HTML5. Ff you see my code above, I already have on the first row –  Oct 29 '19 at 13:07
  • @veskimati - Right. Just saying, don't take the advice above to use 4.01. – T.J. Crowder Oct 29 '19 at 13:14
1

You just need to tell IE that it shouldn't hobble itself and pretend that it's IE7. Add this to head:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

The problem was that document.querySelector was failing, because it isn't a function in IE7. Yes, really, it's that dumb.

When I don't do that with your file, I get the error. When I add it, I don't.

If you're using IE with intranet sites, you may also want to go into Internet Options and tell it not to use "compatibility view" with them; more here.

For what it's worth, here's my standard boilerplate page setup, which serves me pretty well:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>...</title>
<style>
html {
    box-sizing: border-box;
    font-family: sans-serif;
}
*, *:before, *:after {
    box-sizing: inherit;
}
</style>
<!-- module scripts go here -->
</head>
<body>
<!-- content goes here -->
<!-- non-module scripts go here -->
</body>
</html>

That:

  • Declares the HTML5 doctype to get standards mode
  • Declares that the file is in UTF-8 (obviously, I then ensure that the file is in UTF-8)
  • Sets an appropriate viewport for mobile
  • Tells IE not to hobble itself
  • Defaults to border-box
  • Puts scripts in the right place

You've said that it works for you when the script is inline content in the script element, but not when it's in a separate file. Look in the F12 devtools for an error, probably a 404 on the file or an invalid content type, etc. Because it definitely works.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 1
    I'd add to your boilerplate just ``, so it looks good also in mobile devices. A good trick is that, if you are using [emmets](https://docs.emmet.io/cheat-sheet/) (default in vs code), you can just type `! + tab` and the boilerplate will appear – Christian Vincenzo Traina Oct 29 '19 at 13:28
  • 1
    @CristianTraìna - Gah! **Very** good thing to add, how was that missing?! Thank you! Added to the above and to my own copy. :-) – T.J. Crowder Oct 29 '19 at 13:30
  • Thankyou for this informative answer. I actually found out that something else is causing the problem.. For some reason IE doesn't read this script from my separate JS file.. When I put an alert to my script.js file, it worked, but when I added the script shown above (to toggle DIVs) it didn't work.. But again, it works if I paste it to my php file between –  Oct 29 '19 at 15:31
  • @veskimati - Where was the `` located in the file? Did you have the ending tag on it? You can't self-close them, for instance; `` doesn't work. – T.J. Crowder Oct 29 '19 at 15:35
  • Yes, I closed it. I have it before

    . But as I said, if I only put an alert to script.js, it works. But for some reason the toggle script doesn't work from there.. which is really weird.

     –  Oct 29 '19 at 15:40
  • Btw, any idea why a simple script such as `document.querySelectorAll("[name=image").forEach( ele => ele.addEventListener("change", (e) => e.target.closest(".form").querySelector(".sub").disabled = false ) );` wont work on IE? :l –  Oct 29 '19 at 15:45
  • @veskimati - Yes -- [IE doesn't support arrow functions](https://stackoverflow.com/questions/40216015/arrow-function-not-working-in-ie-why). You should be seeing a syntax error in the F12 console. I wouldn't be surprised if it doesn't have `closest` either, that's a relatively new addition to the DOM, and IE is really quite old at this point. – T.J. Crowder Oct 29 '19 at 15:49
  • Now that's very odd. Why does IE still have to exist after creating Edge.. –  Oct 29 '19 at 15:55
  • @veskimati - Very big IT organizations (500+ person corps, government) move very slowly. :-) – T.J. Crowder Oct 29 '19 at 16:08
  • @veskimati - See the update at the end of the answer, it [definitely works](https://embed.plnkr.co/oMwkgKOqKRQBu1hcPDZp/) on IE even in a separate file. – T.J. Crowder Oct 29 '19 at 16:11
  • I'm afraid something's just wrong with my javascript.. If I only use this small script in my code, it works, but if I add the other scripts aswell, it stops working. I think the other scripts are interrupting this one.. My original script.js content: https://www.codepile.net/pile/Qg3bzzr0 –  Oct 30 '19 at 09:50