Geek Answers Handbook

Javascript doesn't work in IE if debugger doesn't work

The following code works fine in FireFox 7, but when pulling the same page in IE 9, the jQuery functions (hide and show) do not work. However, if you open the debugger in IE and update, everything works fine. It, like jQuery code, will not work if the debugger does not work, and you refresh the page (or start IE with the debugger), which makes debugging difficult.

all CSS and scripts are included for this example. If I need to include any other information, please let me know.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <!--<link href="_css/main.css" rel="stylesheet" type="text/css" />--> <style> html, body { margin: 0px; padding: 0px; } #wrapper { width:1000px; margin-left: auto; margin-right: auto; height: 100%; } #sidebar { width: 100px; height:100%; float: left; background-color: #FF0; } #maincontent { float: left; width: 400px; height:100%; ; background: #c1d8b9; } #right { width: 500px; background-color: #0F3; float: right; height: 100%; } body { background-color: white; } ul { list-style-type: none; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div id="wrapper"> <div id="sidebar"> Sidebar <ul > </ul> </div> <div id="maincontent"> Main content <button id="hidr">Hide</button> <button id="showr">Show</button> <ul id="listMiddle"> <li id="li1">TEST1</li> <li id="li2">TEST2</li> <li id="li3">TEST3</li> <li id="li4">TEST4</li> </ul> </div> <div id="right"> Right <ul id="listRight"> </ul> </div> </div> <script> var arryLIs = document.getElementsByTagName('li'); var middleUL = document.getElementById('listMiddle'); var rightUL = document.getElementById('listRight'); var arrymiddleLIs = middleUL.getElementsByTagName('li'); var arryrightLIs = rightUL.getElementsByTagName('li'); for (var i=0; i<arryLIs.length; i++){ arryLIs[i].onclick = moveright; //console.log(arryLIs[i].innerHTML); } console.log(arrymiddleLIs); console.log(middleUL); var goBefore=null; function moveright() { var goBefore=null; goBefore=findSortRight(this); document.getElementById('listRight').insertBefore(this,goBefore); this.onclick = moveleft; //console.log(arrymiddleLIs); //console.log(arryrightLIs); } function moveleft() { document.getElementById('listMiddle').appendChild(this); this.onclick = moveright; console.log(arrymiddleLIs); console.log(arryrightLIs); } function findSortRight(newElement){ var goBefore=null; for (var r=0; r<arryrightLIs.length; r++){ //console.log(newElement.innerHTML<=arryrightLIs[r].innerHTML); if (newElement.innerHTML<=arryrightLIs[r].innerHTML) { //console.log(arryrightLIs[r]); goBefore=arryrightLIs[r]; break; } } // console.log(goBefore.innerHTML); return goBefore; } $("#hidr").click(function () { $("li").hide(); }); $("#showr").click(function () { $("li").show(); }); </script> </body> </html>
+4
source share
4 answers

console.log is a problem. Delete it or define it if absent before the call:

 console = console || {}; console.log = console.log || function(){};
+8
source

Your problem seems to come from console log events. Basically, IE doesn't know what to do with them, and the JS script crashes before it ever gets to it.

You can go with something like:

 if( window.console != undefined) { //your console logs goe here }
+3
source

None of these solutions worked for me. Here is what I found that actually worked:

 if (typeof(console) === 'undefined') { console = { log : function(){ /*alert(arguments[0]);*/ } }; }
+1
source

You want the console to work if it is really defined.

Try the following:

  if (typeof console !== 'undefined') { console = {}; console.log = function() {}; }
0
source

More articles:


All Articles