Code with classList does not work in IE?
The classList property is not supported by IE9 and lower. IE10+ supports it though.
Use className += " .." instead. Note: Do not omit the space: class names should be added in a white-space separated list.
var img = new Image();
img.src = '/image/file.png';
img.title = 'this is a title';
img.className += " profilePic"; // Add profilePic class to the image
var div = document.createElement("div");
div.className += " picWindow"; // Add picWindow class to the div
div.appendChild(img);
content.appendChild(div);
classList.toggle(show) not working in IE11
Try to make a test with code below may help you to solve your issue.
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>/* Popup container - can be anything you want */.popup { position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
/* The actual popup */.popup .popuptext { visibility: hidden; width: 160px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -80px;}
/* Popup arrow */.popup .popuptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent;}
/* Toggle this class - hide and show the popup */.popup .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s;}
/* Add animation (fade in the popup) */@-webkit-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;}}
@keyframes fadeIn { from {opacity: 0;} to {opacity:1 ;}}table, th, td { border: 1px solid black;}</style></head><body>
<h2>Test</h2><table><tr><td><div class="popup" onclick="myFunction(1)"><h2>1</h2> <span class="popuptext" id="myPopup1">Popup 1</span></div></td><td><div class="popup" onclick="myFunction(2)"><h2>2</h2> <span class="popuptext" id="myPopup2">Popup 2</span></div></td><td><div class="popup" onclick="myFunction(3)"><h2>3</h2> <span class="popuptext" id="myPopup3">Popup 3</span></div></td><td><div class="popup" onclick="myFunction(4)"><h2>4</h2> <span class="popuptext" id="myPopup4">Popup 4</span></div></td></tr></table><script>
function myFunction(data) { var txt= "myPopup" + data; var popup = document.getElementById(txt); popup.classList.toggle("show");}
</script>
</body></html>JavaScript Function Working on Chrome but not IE
It looks like your code is a little advanced for IE11 along with some variances in browser implementation.
For arrow functions and some other ES6 features not supported in IE11 you can use a transpiler to transform your JS from ES6 to ES5. Though this will not resolve all issues. The transpiler will not transpile target.closest(). You will need to find a different implementation of searching ancestor elements.
IE11 won't let you use forEach() with a NodeList, an Object, which is what document.querySelectorAll() returns. You can use [].slice.call( document.querySelectorAll() ), or similar method, to convert the NodeList to an array. Once the collection is an array forEach() will work as expected in IE11.
// https://stackoverflow.com/questions/22119673/find-the-closest-ancestor-element-that-has-a-specific-class#22119674function findAncestor(el, cls) { while ((el = el.parentElement) && !el.classList.contains(cls)); return el;}
function open(e) { let li = e.target; li.classList.add('hover');}
function close(e) { const hoverable = findAncestor(e.target, 'hover'); hoverable.classList.remove('hover');}
const infoBoxListItems = [].slice.call(document.querySelectorAll('.info-boxes li'));const closeButtons = [].slice.call(document.querySelectorAll('.profileclose'));
infoBoxListItems.forEach(function(li) { li.addEventListener('mouseenter', open);});
closeButtons.forEach(function(btn) { btn.addEventListener('click', close);});.everything { text-align: center; height: 1000px;}
.everything.hover { cursor: default;}
#wrapper { margin: 0 auto;}
#wrapper img { width: 100%; /* the image will now scale down as its parent gets smaller */}
.infobox-list { display: inline-block; text-align: center;}
ul,ol,li { margin: 0; padding: 0; list-style-position: outside; list-style-type: none;}
h1,h2,h3,h4,h5,h6,ul,li,ol,form,fieldset { margin: 0; padding: 0;}
*,*:before,*:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
ul,menu,dir { display: block; list-style-type: disc; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 0px;}
.hr { border-color: rgba(255, 255, 255, 0.3); margin-left: 9px; width: 210px;}
body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; padding: 0; margin: 0; background-color: #fcfcfc; color: #555; min-width: 20em;}
.info-boxes li { width: 310px; height: 535px; background: #f2f2f2; border: 0px solid #efefef; border-radius: 4px; margin: 0 0px 0px; cursor: pointer; position: relative; overflow: hidden; transform: scale(0.75);}
.ptext { text-align: center; font-size: 20px;}
.profile { margin-top: 10%; margin-left: 1px; width: 75px; height: 75px;}
.performance { margin-left: 1px; margin-top: 10%; width: 75px; height: 75px;}
.learning { margin-top: 10%; width: 75px; height: 75px;}
.team { margin-top: 10%; width: 75px; height: 75px;}
.smallicons { width: 50px; height: 50px;}
.profileclose { margin-top: 215px;}
.infobox-list li { display: inline-block;}
a { color: white; text-decoration: none; font-weight: lighter;}
.info-boxes li .infobox { display: table-cell; text-align: center; vertical-align: middle; height: 535px; width: 310px;}
.info-boxes li .infobox:before { content: ''; position: absolute; left: 20%; width: 160%; height: 188%; background-color: rgb(255, 255, 255); /* fallback */ background-color: rgba(255, 255, 255, 0.2); top: 0; -webkit-transform: rotate(46deg); -moz-transform: rotate(46deg); transform: rotate(30deg);}
.info-boxes li.hover .shade { animation-name: windowshade; cursor: pointer;}
.info-boxes li .shade,.info-boxes li.hover .shade { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: forwards;}
section p { line-height: 1.3em; color: #6d6e71; width: 100%; padding: 0 10px; margin-top: 5px; margin-left: 0px; text-align: left;}
p { display: block;}
.info-boxes li .shade { position: absolute; width: 310px; height: 555px; left: 0; top: 0; background-color: #6caf46; color: #fff; display: table; vertical-align: middle; padding: 20px 10px 0; transform: translateY(-340px); animation-name: windowshade-out;}
.info-boxes li .shade h3 { color: #fff; padding: 10px; font-weight: bold}
.info-boxes li .shade p { color: #fff; line-height: 3em; font-weight: lighter;}
.ie9 .info-boxes li.hover .shade { top: 245px}
.info-boxes li.hover a { text-decoration: none}
@keyframes windowshade { 0% { transform: translateY(-535px) } 100% { transform: translateY(0) }}
@keyframes windowshade-out { 0% { transform: translateY(0) } 100% { transform: translateY(-535px) }}<section class="info-boxes"> <ul class="infobox-list"> <li> <a href="#"> <div class="infobox"> <table> <tr> <img class="profile" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497637065/profile_i0evlz.png"></tr> <tr> <p class="ptext">Profile</p> </tr> </table> </div> <div class="shade"> <table> <tr> <td> <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497301295/About-Me_dudglr.png"> </td> <td> <p>About Me</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Resume_tb7t02.png"> </td> <td> <p>Resume</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497280574/Accountabilities_qfdcns.png"> </td> <td> <p>Accountabilities <p/> <hr class="hr"> </td> </tr> </table> <div class="profileclose">Close</div> </div> </a> </li> <li> <div class="infobox"> <table> <tr> <img class="learning" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497637065/Learning-Icon_hqtc2k.png"></tr> <tr> <p class="ptext">Learning</p> </tr> </table> </div> <div class="shade"> <table> <tr> <td> <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-Plan_v43ne7.png"> </td> <td> <p>Training Plan</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-History_czttv1.png"> </td> <td> <p>Training History</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497298863/coursefeedback_qdh1wm.png"> </td> <td> <p>Course Feedback</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497299106/Favourites_y9gkce.png"> </td> <td> <p>Training Favourites <p/> <hr class="hr"> </td> </tr> </table> </div> </li>
<li> <a href="#"> <div class="infobox"> <table> <tr> <img class="performance" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497637065/Performance-Icon_ozaldt.png"></tr> <tr> <p class="ptext">Performance</p> </tr> </table> </div> <div class="shade"> <table> <tr> <td> <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Goals_aw4nso.png"> </td> <td> <p>Goals</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284934/EA_n8lvj1.png" </td> <td> <p>Effectiveness Assessment</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/development_yfv6o1.png" </td> <td> <p>Development Plan</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497285433/resources_b3r88g.png"> </td> <td> <p>Resources <p/> <hr class="hr"> </td> </tr> </table> </div> </a> </li>
<li> <div class="infobox"> <table> <tr> <img class="team" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497637065/team_nl2cwh.png"></tr> <tr> <p class="ptext">Team</p> </tr> </table> </div> <div class="shade"> <table> <tr> <td> <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497300652/Team_iovnl5.png"> </td> <td> <p>Team</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Goals_aw4nso.png"> </td> <td> <p>Team Goals</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/development_yfv6o1.png"> </td> <td> <p>Team Development</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-Plan_v43ne7.png"> </td> <td> <p>Team Training</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497301295/Approval_f9y1da.png"> </td> <td> <p>Approvals <p/> <hr class="hr"> </td> </tr> </table> </div>
</li> </ul></section>classList.replace() is not a method or property in IE11 after using babel-polyfill
babel-polyfill does not polyfill classList, and classList support in IE11 is limited. You need an additional polyfill, as the link to MDN you provided also indicates.
Also see this existing answer:
Object doesn't support property or method 'replace' on Internet Explorer 11
And a related core-js issue (which is used by babel-polyfill, so explains why it isn't implemented): https://github.com/zloirock/core-js/issues/287
I checked this backend code using Postman. It sometimes works properly. But, sometimes, it does not work. What's the matter with this code?
In the router file, please use the await ' keyword before these functions
addStudent()
getStudents()
getStudent()
updateStudent()
deleteStudent()
As an example
studentRouter.post("/",async ctx =>{
const data = ctx.request.body;
const post = await addStudent(data);
ctx.set('Content-Type','application/json');
ctx.body = {success:true}
ctx.status = 201;
})
Some Javascript is not working until hitting F12 in IE 11
It's working now if I remove the console.log code, or change the document module to "Edge".
Related Topics
ASP.NET MVC 3 Razor: Include JavaScript File in the Head Tag
Angularjs Toggle Class Using Ng-Class
What Is the $$ (Double Dollar Sign) Used for in Angular
Downloading Canvas Element to an Image
Compare 2 Arrays Which Returns Difference
JavaScript While Loop Return Value
Node.Js Variable Declaration and Scope
Batchsize Field Name Ignored in Field Projection
Skip Arguments in a JavaScript Function
How to Create a Simple Http Proxy in Node.Js
Chaining .Bind() Calls in JavaScript. Unexpected Result
Javascript/Jquery Check Broken Links
How to Use Node.Js Module System on the Clientside
Nested Element (Web Component) Can't Get Its Template
Simulating a Mousedown, Click, Mouseup Sequence in Tampermonkey