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.

Improve this question
7
  • 3
    What version of IE? And what have you done to try to narrow down the problem? You should at a minimum be able to figure out whether it's the JavaScript or CSS or a combination of them. Commented Oct 28, 2019 at 14:22
  • Try surrounding the attribute values in css with quotes i.e. [dir="ver"] instead of [dir=ver] Commented Oct 28, 2019 at 14:22
  • 5
    Not the main issue, but you have four elements with the same id - that is invalid. Commented Oct 28, 2019 at 14:22
  • > is the child selector. You don't have a div in .holder - that is the div. try div.holder {display: none;} Commented Oct 28, 2019 at 14:40
  • 1
    What does your IE console say ? Any errors ? Commented Oct 28, 2019 at 14:40

2 Answers 2

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I already have type="text/css" in my original code, not "css/stylesheet".. Adding "-//W3C//DTD HTML 4.01 Transitional//EN" "w3.org/TR/html4/loose.dtd" to my doctype didn't solve the problem.
@veskimati & KC-L - Use HTML5: <!doctype html>. It's been many years since 4.01 was still an appropriate choice.
I am using HTML5. Ff you see my code above, I already have <!doctype html> on the first row
@veskimati - Right. Just saying, don't take the advice above to use 4.01.
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.

Improve this answer

11 Comments

I'd add to your boilerplate just <meta name="viewport" content="width=device-width, initial-scale=1.0">, so it looks good also in mobile devices. A good trick is that, if you are using emmets (default in vs code), you can just type ! + tab and the boilerplate will appear
@CristianTraìna - Gah! Very good thing to add, how was that missing?! Thank you! Added to the above and to my own copy. :-)
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 <script> tags.. Very weird :/
@veskimati - Where was the <script src="yourfile.js"></script> located in the file? Did you have the ending tag on it? You can't self-close them, for instance; <script src="yourfile.js" /> doesn't work.
Yes, I closed it. I have it before </body>. 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.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.