I'm following up on my previous post that was put on hold.
I encountered some issues with my website in IE11, which are now resolved. However, I want to implement a code snippet that will display a text box if any similar problems arise in the future.
In my previous inquiry, a user named Zani provided a code snippet that specifically targeted IE11, but unfortunately it's not functioning as expected. In my IE11 Console, I'm seeing the following error message:
SCRIPT5007 : Unable to get property 'style' of undefined or null reference.
Whether I embed this code in a JavaScript file or directly into the HTML, the issue persists.
The problematic code is as follows:
var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
if(isIE11)
document.getElementById("IDOfYourElement").style.display="block";
While I'm well-versed in HTML and CSS, JavaScript presents a different challenge. I believe there might be an issue related to the usage of style, and I've ensured that the element ID is correctly specified.
EDIT: 1 Here is the current structure 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()">×</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>
Placing the script at the bottom of the HTML page resolves the issue. However, I would prefer having the JavaScript in a separate file. Attempting to use a ready function has not worked successfully.