0

This is a second post for my last one that got on hold.

I want a text box to appear when I or someone open my website in IE11 because I had some issues, the issues got sorted out. But I want this code for another time if something happens again.

In my last post a guy called Zani, gave a code that only reacted on IE11, but it is not working as it should. In my IE11 Console it says:

SCRIPT5007 : Unable to get property 'style' of undefined or null reference.

It doesn't matter if I put it a JavaScript file or I script it into HTML.

The code is:

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
if(isIE11)
  document.getElementById("IDOfYourElement").style.display="block";

I'm normally good in HTML and CSS, but Javascript is a whole different level. I'm not completely sure where there is something wrong. but I think it has something to do with style, and at the point where I should write the ID of my element, I have changed it to the correct ID and there is no wrong grammar there.

EDIT: 1 Here is the code of the site.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
</script>
<link href="/CSS/Incompatible.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/Incompatible.js"></script>
    <script type="text/javascript">
var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
    if(isIE11)
  document.getElementById("simpleModal").style.display="block";
</script>
</head>
<body>
<button id="modalBtn" class="button" onClick="myModal()">Click
Here</button>
<div id="simpleModal" class="modal">
<div class="modal-content">
  <div class="modal-header">
      <span class="closeBtn" onClick="myModalHide()">&times;</span>
      <h2>Modal Header</h2>
  </div>
  <div class="modal-body">
    <p>Hello...I am a modal</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla repellendus nisi, sunt consectetur ipsa velit repudiandae aperiam modi quisquam nihil nam asperiores doloremque mollitia dolor deleniti quibusdam nemo commodi ab.</p>
  </div>
  <div class="modal-footer">
    <h3>Modal Footer</h3>
  </div>
</div>
</div>
</body>
</html>

Okay so by putting it on the bottom of the HTML page works. But I really want Javascript to be in a javascript file. so I tried making a ready function, but it don't work.

Jes
  • 51
  • 6

1 Answers1

0

What the error is saying is that there is no element with ID IDOfYourElement (or whatever ID you placed here). So one of 2 things:

  1. You don't have an element with the ID (IDOfYourElement) OR
  2. The javascript file is loading before the elements have loaded.

If the case is number 2, then you should make sure that your <script> tag is included at the very bottom of your HTML file, Or wrap your javascript code with a ready function.

EDIT

To wrap your code in a ready function you can achieve that using Jquery or pure Javascript. Here are the examples

Using Pure Javascript

window.onload = function() {
  // DOM has loaded, you can execute your JS code now.
}

Using Jquery

$( document ).ready(function() {
  // DOM has loaded, you can execute your JS code now.
});
Alizoh
  • 1,269
  • 1
  • 11
  • 16
  • It was the case number 2 I added it to the bottom and it worked. If I want the code in the Javascript file. how do I make that ready function? – Jes Jul 26 '18 at 09:10
  • @JessenJonas I updated my answer to show you how to wait for the page to load before executing your JS. – Alizoh Jul 27 '18 at 09:37
  • Thank you! That really helped! – Jes Jul 27 '18 at 11:26