Hello,

I developed a strategy on my website, which will I explain here, and I have a question below. Some feedback would be appreciated.

Using JavaScript, it is possible to make an element appear only when a checkbox is clicked. Unfortunately, the element will not appear for people with JavaScript diabled. Even if it is enabled, they might have a firewall that strips the JavaScript (i.e. on work computers, shared computers, etc).

To fix this, here is a strategy I developed:

1) Have the element (id="A") in the page with style display:block" or display:inline.

2) Have the checkbox in another element (id="B") with style display:none

If JavaScript is disabled:
A) The onload event "disappear" does not work, so Element A displays right from the beginning;
B)The onload event "appear" does not work, so Element B (with the checkbox) does not appear (the checkbox would not control Element A anyway, so we don't want it there)

If JavaScript is enabled:
A) The onload event "disappear" works, and makes Element A disappear;
B) The onload event "appear" makes the checkbox appear (which can contrel Element A, making it appear again, or disappear again)

Please read on. (I was nice enough to include the code for the above actions)

*******
I am aiming to make my website compliant with HTML 4 Strict,
unfortunately to make a link open in a new window, javascript is required for compliance.
I plan to use the same strategy as above, so it still opens in a new window if javascript is disabled. For example:

if javascript is disabled, a link appears like so:
<a href="hello.html" target="_blank">helloworld</a>

if javascript is enabled, this link appears instead:
<a href="hello.html" rel="external">helloworld</a>
Where JavaScript handles the open in new window request.

If I use the same strategy as above, would the site be comliant with HTML 4 Strict?
Also, is there any disadvantages to this approach?

********

The following helps usability for people with JavaScript disabled:

Code HTML4Strict:
<head>
<style type="text/css">
#appearance {display: block}
</style>
 
<script type="text/javascript">
function toggle(targetId, sourceId){
  target = document.getElementById( targetId );
  if (sourceId.checked){
  target.style.display = "inline";
  } else {
  target.style.display = "none";
  }
}
 
function disappear(targetId, sourceId){
  target = document.getElementById( targetId );
  target.style.display = "none";
}
 
function appear(targetId, sourceId){
target = document.getElementById( targetId );
target.style.display = "inline";
}</script>
<head>
 
<body onload="disappear('A'); appear('B')">
 
 
<p id="B">
Turn A on and off: <input type="checkbox" onClick="toggle('A', this)" />
</p>
 
<div id="A"><p>A (Displays after clicking checkbox, or right when page loads if javascript disabled)</p></div>
 
</body>
<!-- copyright  2007 Frank Forte -->