I'm generating a TV Guide page from a Perl script to HTML and then rendering
the page. The HTML has the schedule in two formats: 1) grid; 2) list. What
I'm trying to do is show just the grid or just the list instead of both. The
default is grid type. The way I'm trying to implement this is by using
document.getElementById to get the DIV containing the HTML and
<element>.innerHTML = <newText> to set the alternate type of listing (grid/list).
The code works to actually change the content, but then seems to reload the page
reverting it back - alert popup in init shows it's being called once on load and
again on click of 'Flip View' button (which it shouldn't). How do I stop the
second load from happening?
TIA, Bill
My test case is below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Flip Test</TITLE>
</HEAD>
<BODY>
<SCRIPT> // init global vars
var isGrid = 0; // cause a switch between grid text & list text
// isGrid == 0 means init, == 1 means grid active, == 2 means list active
var gridTxt = "<P>Grid Text</P>"; // just some test text
var listTxt = "<P>List Text</P>"; // just some test text
document.body.onload = init; // init to grid text
// function to swap grid and list content
function FlipType () {
// alert ("0: isGrid=" + isGrid); // debug
// get the current div object by id
var flipDiv = document.getElementById("FlipDiv");
// 1st execution on init doesn't get to here (init:, 0:)
// alert ("1: " + flipDiv.innerHTML); // debug
if (isGrid != 1) { // set to grid if not grid
flipDiv.innerHTML = gridTxt;
// alert ("2: " + flipDiv.innerHTML); // debug
isGrid = 1; // set flip switch to grid
} else { // else set to list
flipDiv.innerHTML = listTxt;
// alert ("3: " + flipDiv.innerHTML); // debug
isGrid = 2; // set flip switch to list
}
// alert ("4: isGrid=" + isGrid); // debug
// button click execution gets to here, but seems to re-call init like the page
// is re-loading ???
// 0:, 1:, 2: 4:, init:. 0:
}
// init calls FlipType to set initial grid text
function init () {
document.body.onload = null; // trying to prevent 2nd load
alert ("init: isGrid=" + isGrid); // getting called on button click-wrong
// if (isGrid == 1 || isGrid == 2) { ; } else { FlipType (); } this fails to work
FlipType (); // to set the text the first time to grid
}
</SCRIPT>
<!-- button to test FlipType -->
<FORM>
<!-- for some reason FlipType is executed twice when I click it ???
maybe the body is re-loading from onload ??? -->
<BUTTON onclick="FlipType()">Flip View</BUTTON>
</FORM>
<!-- actual code to flip goes inside this form in the DIV -->
<FORM>
<FORM METHOD="POST" ACTION="
http://www.todbe.com/cgi-bin/prt_tv_sched.pl">
<BR><INPUT TYPE="HIDDEN" NAME="DATE" VALUE="20160612">
<DIV ID="FlipDiv"><P>Replace Me</P></DIV>
<BR><INPUT TYPE="SUBMIT" VALUE="Print Selected Schedule">
</FORM>
</BODY>
</HTML>