Dear all,
First time posting. I have a piece of javascript like the following. What it does is when you click on the text 'Click me', it will prompt you for password; if you enter 'test', it will show the url 'picasa' in a div. The code works in FF3 perfectly but it just won't show the url in IE7. Please shed me some light.

<html>
<head>
  <SCRIPT LANGUAGE="JavaScript">

 
var URL = "http://picasaweb.google.ca/";
var form = "<form name=\"gform\"" + "method=\"post\">" +
           "Password: <input type=\"password\" name=\"gpassword\" id=\"gp\"/>" +
          "<input type=\"submit\"   onclick=\"validate()\" value=\"submit\" />" +
          "</form>";

var pass = "test";

function setFocus()
{
document.getElementById("gp").focus();
}

function showURL()
{
  document.getElementById('GalleryDiv').innerHTML = "<a href=\"" + URL + ">" + "LINK" + "</a>";
}

function showForm()
{
  document.getElementById('targetDiv').innerHTML = form;
} 

function validate()
{
if(document.getElementById("gp").value==pass)
  {
   showForm();
   showURL();
  }
   
} //end validate()
  </SCRIPT>
</head>

<body onload="setFocus()">


<h1 onclick="showForm();setFocus();">Click me</h1>

<div id="targetDiv">
</div>

<div id="GalleryDiv">
</div>

</body>
</html>

I did. But I didn't quite get it.

Same issue with Firefox vs IE thread. Have you checked it out?

Ok, here's your code. It's been configured according to your provided (x)HTML document and all unnecessary function's has also been removed. I still maintained some of your lines so you won't loose track when you perform editing in the script.

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>CROSS-PLATFORM</title>
<script type="text/javascript">
// <![CDATA[
var url, form, pass, loc;
var showURL, showForm, validate;

   url = "http://picasaweb.google.ca/";
pass = "test";

showURL = function() {
   loc = '\n<a href="' + url + '">LINK</a>\n';
   (( document.getElementById ) ? document.getElementById('GalleryDiv').innerHTML = loc : document.all["GalleryDiv"].innerHTML = loc );
};

validate = function() { 
  txt = (( document.getElementById ) ? document.getElementById("gp") : document.all["gp"] );
   if ( txt.value === pass ) { 
   showURL(); return false;
   } alert("Invalid Password!"); 
return false;
};

showForm = function() {
   form = '\n<form action="#" id="gform" method="post" onsubmit="return validate();">\n';
   form += 'Password : <input type="password" name="gp" id="gp" value="" size="20" />\n';
   form += '<input type="submit" value="submit" />';
   form += "</form>";
   (( document.getElementById ) ? document.getElementById('targetDiv').innerHTML = 
form : document.all.targetDiv.innerHTML = form );
    (( document.getElementById ) ? document.getElementById("gp").focus() : document.all["gp"].focus() );
};

// ]]>
</script>
</head>
<body>
<h1 onclick="showForm();">Click me!</h1>
<div id="targetDiv"></div>
<div id="GalleryDiv"></div>
</body>
</html>

Hope you find it useful...

Thanks so much Essential. Frankly I did not fully understand why yours works beautifully while mine just won't get along with IE. Anyhow, I am still wondering what magic this line of code does (( document.getElementById ) ? document.getElementById("gp") : document.all["gp"] ); Afterall, I am still green on JavaScript.

It's a shorthand statement of:

if ( condition ) { 
   return true;
} else { 
   return false;
}

shorthand statement syntax:

(( [b]condition[/b] ) ? condition is true : false condition );

NOTE This will only work on a single line statement -- if you have more lines', then simply do the whole thing with the if ( ) { } else { } block.

Hope it goes wel with you...


essential

This article has been dead for over six months. Start a new discussion instead.