Code works in chrome and firefox but fails in IE9 - javascript

<!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>
<script language="javascript" type="text/javascript">
function abc()
{
ansArray = ['a'];
document.write('<input type = "button" value = "a">');
document.write('<input type = "button" value = "b">');
var myButton = document.getElementsByTagName("input");
myButton[0].onclick = function() {
if(ansArray[0] == 'a')
myButton[0].style.backgroundColor = "green";
else
myButton[0].style.backgroundColor = "red";
}
myButton[1].onclick = function() {
if(ansArray[0] == 'b')
myButton[1].style.backgroundColor = "green";
else
myButton[1].style.backgroundColor = "red";
}
}
</script>
</head>
<body onload="abc()">
</body>
</html>
This code segment is to change the colour of the two buttons on click event,works fine in chrome and firefox but the onclick functions does not work in IE9. Please help... Thanks in advance

Try calling the function like
(function abc(){
// code here
})();
Also use ; after each function expression, i.e. myButton[0].onclick = function() {...};.
Working here.

Related

why javascript doesnt run

I am learning JavaScript.
I've written this code, but it does not seem to run.
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script language="javascript" type="text/javascript">
function nav(){
try{
var str="<table border=1>";
for (var n in navigator){
str+="<tr><td>" + n + "</td></tr>";
}
str+="</table>
return("jetzt wird das Ding aufgelistet: <br/>" + str);
}catch(e){return(e);}
}
function writeit(){
document.write(nav());
}
</script>
<title>for learning purpos</title>
</head>
<body>
<form>
<script>
document.write(nav());
</script>
<p>press the button to get the properties in navigator</p>
<input type="button" id="btnNavigator" value="get" onclick="writeit();"/>
</form>
</body>
</html>
You haven't closed one string.
str+="</table>";
Best practice is to look into the console from developer tab, inspect page. Also on that tab on the bottom, you can try javascript code or even jQuery if you have the library added.
Your code it's wrong at line 13 you have Invalid or unexpected token because you didn't close the string and at line 30 nav it's not defined.
You can use this code:
function navBuild(n)
{
var tblS = "<table>";
var tblE = "</table>";
var strTrTd = "";
for (i=1; i<=n; i++)
{
strTrTd = strTrTd + "<tr><td>" + i + "</td></tr>";
}
var strAll = tblS + strTrTd + tblE;
console.log(strAll);
document.getElementById("contentBox").innerHTML = strAll;
}
And in your HTML you could use:
<input type="button" id="btnNavigator" value="get" onclick="navBuild(5);"/>
<div id="contentBox"></div>

Unknown symbols displayed in czech words in javascript application

I have an unknown symbols displayed in my javascript application for try catch construction using czech language even when I use coding windows-1250. These symbols is displayed like question marks in diamond.
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/>
<title>Konstrukce Try/Catch</title>
<script type="text/javascript" src="number.js"></script>
</head>
<body>
<form name="formular" id="formular" action="#">
<div id="cisloDiv">Zadejte číslo v rozsahu 1 až 100: <input id="cislo" name="cislo"> <span id="informace"> </span></div>
<div><input id="odeslatFormular" type="submit"></div>
</form>
<script type="text/javascript">
function inicializuj() {
document.forms[0].onsubmit = function() { return zkontrolujFormular(this) };
}
window.onload = inicializuj;
</script>
</body>
</html>
javascript
function zkontrolujFormular() {
try {
var cislo = document.forms[0]["cislo"];
if (isNaN(cislo.value)) {
var chyba = new Array("Nejedná se o číslo",cislo);
throw chyba;
}
else if (cislo.value > 100) {
var chyba = new Array("Zadané číslo je větší jak 100",cislo);
throw chyba;
}
else if (cislo.value < 1) {
var chyba = new Array("Zadané číslo je menší jak 1",cislo);
throw chyba;
}
return true;
}
catch(objektVyjimky) {
var informace = document.getElementById("informace");
var textChyby = document.createTextNode(objektVyjimky[0]);
var novySpan = document.createElement("span");
novySpan.appendChild(textChyby);
novySpan.style.color = "#FF0000";
novySpan.style.fontWeight = "bold";
novySpan.setAttribute("id","informace");
var rodic = informace.parentNode;
rodic.replaceChild(novySpan,informace);
objektVyjimky[1].style.background = "#FF0000";
return false;
}
}
Have you tried using UTF-8 encoding?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
or shorter:
<meta charset="utf-8" />
Nowadays using encoding other that UTF-8 is rather rare. You may need it in special circumstances, but whenever you can try to use UTF.
Now I have the solution, something was bad in my code because in solution (it is from learning material) it works.

dynamically created td change onclick

I have a a table which has dynamic td's i want to change the weight of letters when clicked. following is my coding but it changes the whole page when clicked. Please tell me where I got it wrong.
function addHandler()
{
var addH=document.getElementsByTagName('td');
for( var i=0;i < addH.length;i++)
{
if(addH[i].addEventListener)
{
addH[i].addEventListener('click',addBold,false);
}
else if(addH[i].attachEvent)
{
addH[i].attachEvent('onclick',addBold);
}
}
}
function addBold()
{
var add=document.getElementsByTagName('td');
for( var i=0;i < add.length;i++)
{
var weightVal=add[i].style.fontWeight;
if(weightVal!=900)
{
add[i].style.fontWeight="900";
}
else
{
add[i].style.fontWeight="100";
}
}
}
Your addBold routine is setting ALL td's. The following works. I wish I could give you a reference link, but I can't. I want that link myself.
[edit] This page works like I think you want it to. Does it work for you?
The "e" gets passed to the event handler. I wish I could say more.
Like I said, I'm looking for a reference on how this works. But it does.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
</style>
<script type="text/javascript">
function addHandler() {
var addH=document.getElementsByTagName('td');
for( var i=0;i < addH.length;i++) {
if(addH[i].addEventListener) {
addH[i].addEventListener('click',addBold,false); }
else if(addH[i].attachEvent) {
addH[i].attachEvent('onclick',addBold); } }
}
function addBold(e) {
if (e.target.style.fontWeight != "900") {
e.target.style.fontWeight = "900"; }
else {
e.target.style.fontWeight = "100"; }
}
</script>
</head>
<body onload="addHandler();">
<div id="bodyid">
<table border="1">
<tr><td>One1</td><td>Two1</td></tr>
<tr><td>One2</td><td>Two2</td></tr>
</table>
</div><!-- bodyid -->
</body>
</html>

Getting keypresses in javascript

I need some help getting keyboard presses. I want to build a function to return the currently pressed key. How could this be done?
Many thanks.
Yes it can done or even you can do more with the following
http://www.openjs.com/scripts/events/keyboard_shortcuts/
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="./pages/scripts/jsl.js"></script>
<script type="text/javascript" src="./pages/scripts/common.js"></script>
<script type="text/javascript" src="./pages/scripts/shortcuts_v1.js"></script>
<script type="text/javascript">
function init() {
shortcut("Shift+F1",function(event) {
alert("Help Me!");
event.preventDefault();
});
shortcut("Ctrl+S",function(event) {
alert("Saved!");
event.preventDefault();
});
shortcut("Right",function(event) {
alert("Right");
event.preventDefault();
});
}
addEvent(window,'load',init);
//ie workaround
document.onfocusout = function(e){
if( e === undefined ){//ie
var evt = event;//ie uses event
if( evt.toElement == null ){//check where focus was lost to
document.getElementById('status').innerHTML += "document.onfocusout->lost<br>";
}
}
};
//ie workaround
document.onfocusin = function(e){
if( e === undefined ){//ie
var evt = event;//ie uses event
if( evt.toElement == null ){//check where focus was lost to
document.getElementById('status').innerHTML += "document.onfocusout->gained<br>";
}
}
};
window.onblur = function(e){
if( e !== undefined ){//ie will have an undefined e here, so this screens them out
document.getElementById('status').innerHTML += "window.onblur->lost<br>";
}
};
window.onfocus = function(e){
if( e !== undefined ){//ie will have an undefined e here, so this screens them out
document.getElementById('status').innerHTML += "window.onblur->gained<br>";
}
};
</script>
</head>
<body>
<div id="status"></div>
</body>
</html>
http://www.w3schools.com/tags/ref_keyboardshortcuts.asp
http://www.openjs.com/scripts/events/keyboard_shortcuts/
http://selfcontained.us/2009/09/16/getting-keycode-values-in-javascript/
refer these links . Is it like you want all the keyboardshortcuts to be returned or some basic functionalities....??

I lose focus from the main page

I am opening a window that is not in my domain and I can not do to maintain the focus on my window. This is the code.
The work is only for IE.
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var win = window;
var myOptions = "width=300,height=250,top=300px,left=300px,toolbar=0,location=0,status=0,scrollbars=0,menubar=0,directories=0,resizable=0";
var myWinReplace = true;
var myWinName = "xwin";
var myUrl = "http://www.google.com";
var myOpen = window.open(myUrl, myWinName , myOptions, myWinReplace);
window.focus(); //option 1
$(myOpen).load(function(){
window.focus(); //option 2
win.focus(); //option 3
setTimeout(function() { window.focus(); }, 500); //option 4
setTimeout(function() { win.focus(); }, 1500); //option 5
});
});
</script>
</head>
<body>
</body>
</html>
I think you can do this:
myOpen.opener.focus();
Here is a link for more information

Categories

Resources