Hello there,

basically i have 3 problems that have been driving me crazy all day long!

firstly the div layers that i have set to dynamically display depending on input from a previous page will display in firefox, but wont display in internet explorer 6? this is a little confusing really. I am using:

function showLayer(id) {
document.getElementById(id).style.visibility = "visible";
}

which is pretty standard, then calling this function if some conditions are met.

So anyone got any ideas on this one? as im out...

secondly, the page wont finish loading totally, i.e. the egg timer/mouse pointer icon is always on screen, rather than just the pointer on its own like it should be. This lead me to beleive that one of the loops wasnt exiting properly, but i tested them all and there doesnt seem to be any problems? so again im really confused!

and finally...

the window.print() function wont actually print anything out in firefox, but it will print in internet explorer (but only once you click print, then refresh the page)

Here is the code in full for the page i am having problems with:

<!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>Calculate Score</title>
<script language="JavaScript" type="text/javascript">

function showLayer(id) {
document.getElementById(id).style.visibility = "visible";
}


function printHTML(){
//start css
    //document.write('<link href="essex.css" rel="stylesheet" type="text/css" />');

    document.write('<style>');
    document.write('body{background-color:#FFFFFF; font-family:Verdana;}');
    document.write('p{font-size:10px; color:#666666; font-family:Verdana;}');
    document.write('h1{font-size:17px; color:#666666; font-family:Verdana;}');
    document.write('h2{font-size:14px; color:#666666; font-family:Verdana;}');
    document.write('h3{font-size:12px; color:#666666; font-family:Verdana;}');
    document.write('.logo{width:800px; height:135px; text-decoration:none; background:url(img/logo.jpg) no-repeat;}');
    document.write('.bottombar{width:800px; height:34px; text-decoration:none; background:url(img/bottom-bar.jpg) no-repeat;}');
    document.write('.cellcolour{background-color:#CCCCCC;}');
    document.write('a:link{color:#333333; text-decoration:none;}');
    document.write('a:link:visited{color:#333333; text-decoration:none;}');
    document.write('a:link:hover{color:#FFFFFF; text-decoration:underline;}');
    document.write('.resultCell{width:187px; visibility:hidden;}');
    document.write('.N{background-image:url(img/bg-arrow-N.gif); background-repeat:no-repeat;}');
    document.write('.NE{background-image:url(img/bg-arrow-NE.gif); background-repeat:no-repeat;}');
    document.write('.E{background-image:url(img/bg-arrow-E.gif); background-repeat:no-repeat;}');
    document.write('</style>');

//end css

    document.write('<table align="center" border="0" width="800px" cellpadding="0">');

        //start top section
        document.write('<tr>');
            document.write('<td colspan="2"><div class="logo"></div></td>');
        document.write('</tr>');
        document.write('<tr>');
            document.write('<td height="20px">');
            document.write('</td>');
        document.write('</tr>');
        document.write('<tr>');
            document.write('<td colspan="2" align="center">');
                document.write('<h2>Thankyou for completing the questionnaire, please see the diagram below to view your results</h2>');
            document.write('</td>');
        document.write('</tr>');
        //end top section

        //start content section

var newValArr = new Array();

// Get the string that follows the "?" in the window's location.
var sGet = window.location.search;
if (sGet) // if has a value...
{
    // Drop the leading "?"
    sGet = sGet.substr(1);

    // Generate a string array of the name value pairs.
    // Each array element will have the form "foo=bar"
    var sNVPairs = sGet.split("&");
    var count =0;    
    // Now, for each name-value pair, we need to extract
    // the name and value.
    for (i = 0; i<27; i++)
    {
    count++;
    //alert(count);
        // So, sNVPairs[i] contains the current element...
        // Split it at the equals sign.
        var sNV = sNVPairs[i].split("=");

        // Assign the pair to the GETDATA array.
        var sName = sNV[0];
        var sValue = sNV[1];


            if(sValue=="100"){
                newValArr[i]=100;
                //alert("value is 100");
            }
            else if(sValue=="75"){
                newValArr[i]=75;
                //alert("value is 75");
            }
            else if(sValue=="50"){
                newValArr[i]=50;
                //alert("value is 50");
            }
            else if(sValue=="25"){
                newValArr[i]=25;
                //alert("value is 25");
            }
            else if(sValue=="0"){
                newValArr[i]=0;
                //alert("value is 0");
            }

            else if(sValue==null){
                alert('there was an error '+ newValArr[q] + q);
                //break;
            }
            if(i==26){
                //alert('broken out of value reading loop');
            }    
    }
}

        var totalKnowItScore=0;
        var totalDoItScore=0;
        for(i=0;i<14;i++)
        {
            totalKnowItScore = totalKnowItScore+newValArr[i];
            //alert(totalKnowItScore);
        }

        for(i=14;i<27;i++)
        {
            totalDoItScore = totalDoItScore+newValArr[i];
            if(i==26){
            //alert("broken out of score addition loop");
            }

        }



            document.write('<tr><td align="center" valign="middle">');
                document.write('<img src="img/KNOWtext.gif">');
            document.write('</td>');
            document.write('<td rowspan="2"><img src="img/DOtext.gif"></td>');
            document.write('</tr>');

            document.write('<tr><td>');
                document.write('<table width="100%" border="0" cellspacing="0" cellpadding="0">');

                    document.write('<tr>');
                        document.write('<td class="E" align="center" valign="middle">');
                            document.write('<div class="resultCell" id="TLTL"><p>You know what the role of Watch Manager is. Your responses to the questionnaire indicate that you are not meeting the expectations and outcomes of the role and this is where you must now focus. The Management Development Programme will help you achieve this.</p></div>');
                        document.write('</td>');
                        document.write('<td class="E" align="center" valign="middle">');
                            document.write('<div class="resultCell" id="TLTR"><p>You know what the role of Watch Manager is. Your responses to the questionnaire indicate that you are not meeting the expectations and outcomes of the role fully and should focus on the aspects listed on the summary below. It is equally important to do the role and achieve the expected outcomes. The Management Development Programme will help you achieve this.</p></div>');
                        document.write('</td>');
                        document.write('<td rowspan="2" valign="bottom">');
                            document.write('<img src="img/newarrow-up.gif">');
                        document.write('</td>');
                        document.write('<td class="E" align="center" valign="middle">');
                            document.write('<div class="resultCell" id="TRTL"><p>You know what the role of Watch Manager is. The Management Development Programme will help you to enhance your skills further and give you the opportunity to share your experience and expertise in order to help others develop their skills in this job.</p></div>');
                        document.write('</td>');
                        document.write('<td align="center" valign="middle">');
                            document.write('<div class="resultCell" id="TRTR"><p>You know what the role of Watch Manager is. The Management Development Programme will help you to enhance your skills further and give you the opportunity to share your experience and expertise in order to help others develop their skills in this job.</p></div>');
                        document.write('</td>');
                    document.write('</tr>');

                    document.write('<tr>');

                        document.write('<td align="center" valign="middle">');
                            document.write('<div class="resultCell" id="TLBL"><p>With more focus on the aspects listed on the summary below your knowledge of the Watch Manager role will be complete. Your responses to the questionnaire indicate that you are not meeting the expectations and outcomes of the role and this is where you must now focus. The Management Development Programme will help you achieve this.</p></div>');
                        document.write('</td>');
                        document.write('<td align="center" valign="middle">');
                            document.write('<div class="resultCell" id="TLBR"><p>With more focus on the aspects listed on the summary below your knowledge of the Watch Manager role will be complete. Your responses to the questionnaire also indicate that you are not meeting the expectations and outcomes of the role and should focus on the aspects listed on the summary below.  It is equally important to do the role and achieve the expected outcomes. The Management Development Programme will help you achieve this.</p</div>');
                        document.write('</td>');
                        document.write('<td class="NE" align="center" valign="middle">');
                            document.write('<div class="resultCell" id="TRBL"><p>With more focus on the aspects listed on the summary below your knowledge of the Watch Manager role will be complete. With more focus on the aspects listed on the summary below your knowledge, performance and achievements will be fully in line with what is expected of you. The Management Development Programme will help you achieve this.</p></div>');
                        document.write('</td>');
                        document.write('<td class="N" align="center" valign="middle">');
                            document.write('<div class="resultCell" id="TRBR"><p>With more focus on the aspects listed on the summary below your knowledge of the Watch Manager role will be complete. Your responses to the questionnaire indicate, however, that you are doing the role and getting the required outcomes. The Management Development Programme will help you understand the role more fully in order to enhance your skills further and share your experience and expertise with others.</p></div>');
                        document.write('</td>');

                    document.write('</tr>');
                    //start middle bar
                    document.write('<tr>');
                        document.write('<td colspan="2" width="378px" align="right">');
                            document.write('<img src="img/newarrow-left.gif">');
                        document.write('</td>');
                        document.write('<td colspan="3" align="left">');
                            document.write('<img src="img/newarrow-right.gif">');
                        document.write('</td>');

                    document.write('</tr>');
                    //end middle bar

                    document.write('<tr>');
                        document.write('<td align="center" valign="middle">');
                            document.write('<div class="resultCell" id="BLTL"><p>You have a partial understanding of the role of Watch Manager and must focus on developing your knowledge more fully. Your responses to the questionnaire also indicate that you are not meeting the expectations and outcomes of the role and you must start to put your knowledge of the role into action. The Management Development Programme will help you achieve this.</p></div>');
                        document.write('</td>');
                        document.write('<td class="NE" align="center" valign="middle">');
                            document.write('<div class="resultCell" id="BLTR"><p>You have a partial understanding of the role of Watch Manager and must focus on developing your knowledge more fully. Your responses to the questionnaire also indicate that you are not meeting the expectations and outcomes of the role and should focus on the aspects listed on the summary below. It is equally important to do the role and achieve the expected outcomes. The Management Development Programme will help you achieve this.</p></div>');
                        document.write('</td>');
                        document.write('<td rowspan="2" height="391px" valign="top">');
                            document.write('<img src="img/newarrow-down.gif">');
                        document.write('</td>');
                        document.write('<td align="center" valign="middle">');
                            document.write('<div class="resultCell" id="BRTL"><p>You have a partial understanding of the role of Watch Manager and must focus on developing your knowledge more fully.  Your responses to the questionnaire also indicate that you are not meeting the expectations and outcomes of the role fully and should focus on the aspects listed on the summary below. It is equally important to do the role and achieve the expected outcomes. The Management Development Programme will help you achieve this.</p></div>');
                        document.write('</td>');
                        document.write('<td class="N" align="center" valign="middle">');
                            document.write('<div class="resultCell" id="BRTR"><p>You are doing the role and getting the required outcomes. Your responses to the questionnaire indicate, however, that you are doing the role and getting the required outcomes. The Management Development Programme will help you understand the role more fully in order to enhance your skills further and share your experience and expertise with others.</p></div>');
                        document.write('</td>');
                    document.write('</tr>');

                    document.write('<tr>');

                        document.write('<td class="NE" align="center" valign="middle">');
                            document.write('<div class="resultCell" id="BLBL"><p>You currently neither understand or do the role. The Management Development Programme will help you to improve your understanding and to focus on putting this understanding into action.</p></div>');
                        document.write('</td>');
                        document.write('<td align="center" valign="middle">');
                            document.write('<div class="resultCell" id="BRBL"><p>You do not understand the role of Watch Manager. Your responses to the questionnaire indicate that you are doing some of requirements and achieving some or the expected outcomes. You must understand the role and what is expected of you before you can do it fully. Focus on the aspects listed on the summary below to help you do the role more fully.</p></div>');
                        document.write('</td>');
                        document.write('<td align="center" valign="middle">');
                            document.write('<div class="resultCell" id="BRBL"><p>You do not understand the role of Watch Manager. Your responses to the questionnaire indicate that you are doing some of requirements and achieving some or the expected outcomes. You must understand the role and what is expected of you before you can do it fully. Focus on the aspects listed on the summary below to help you do the role more fully.</p></div>');
                        document.write('</td>');
                        document.write('<td class="N" align="center" valign="middle">');
                            document.write('<div class="resultCell" id="BRBR"><p>You do not understand the role of Watch Manager. Your responses to the questionnaire indicate, however, that you are doing the role and getting the required outcomes. The Management Development Programme will help you understand the role more fully in order to enhance your skills further and share your experience and expertise with others.</p></div>');
                        document.write('</td>');

                    document.write('</tr>');

                document.write('</table>');
            document.write('</td></tr>');
        //end content section
        //start summary section
        var resultArr = new Array();
        for(i=0;i<14;i++){
                if(newValArr[i]==100){
                    resultArr[i] = "Strongly Agree";
                }
                if(newValArr[i]==75){
                    resultArr[i] = "Agree";
                }
                else if(newValArr[i]==50){
                    resultArr[i] = "Disagree"
                }
                else if(newValArr[i]==25){
                    resultArr[i] = "Strongly Disagree"
                }
                else if(newValArr[i]==0){
                    resultArr[i] = "Not my job";
                }
                if(i==13){
                    //alert('broken out of strongly agree loop');
                }

        }
        for(i=14;i<27;i++){
                if(newValArr[i]==100){
                    resultArr[i] = "Always";
                }
                if(newValArr[i]==75){
                    resultArr[i] = "Usually";
                }
                else if(newValArr[i]==50){
                    resultArr[i] = "Occasionally"
                }
                else if(newValArr[i]==25){
                    resultArr[i] = "Never"
                }
                else if(newValArr[i]==0){
                    resultArr[i] = "Not my job";
                }
                if(i==26){
                    //alert('broken out of always loop');
                }
        }

        document.write('<tr><td colspan="2">');
            document.write('<h1>Your Questionnaire results breakdown:</h1>');
            document.write('<br><h3>All the answers in the questionnaire required a "Strongly Agree" or "Always" answer to gain top marks, the questions you didnt answer "Strongly Agree" or "Always" to are listed below. These are the areas in which you much improve to better fulfill your position:</h3>');
            document.write('<h3>Question: </h3>');
            document.write('</td></tr>');
            for(p=0;p<14;p++){
                if(resultArr[p]=="Agree"){
                    document.write('<tr><td colspan="2">');
                    document.write('<p>'+(p+1)+'. You answered: '+resultArr[p]+'</p>');
                    document.write('</td></tr>');

                }
                if(resultArr[p]=="Disagree"){
                    document.write('<tr><td colspan="2">');
                    document.write('<p>'+(p+1)+'. You answered: '+resultArr[p]+'</p>');
                    document.write('</td></tr>');
                }
                if(resultArr[p]=="Strongly Disagree"){
                    document.write('<tr><td colspan="2">');
                    document.write('<p>'+(p+1)+'. You answered: '+resultArr[p]+'</p>');
                    document.write('</td></tr>');
                }
                if(resultArr[p]=="Not my job"){
                    document.write('<tr><td colspan="2">');
                    document.write('<p>'+(p+1)+'. You answered: '+resultArr[p]+'</p>');
                    document.write('</td></tr>');
                }
                if(p==13){
                    //alert('broken out of summary table creation loop 1');
                }

            }
            for(p=14;p<27;p++){
                if(resultArr[p]=="Usually"){
                    document.write('<tr><td colspan="2">');
                    document.write('<p>'+(p+1)+'. You answered: '+resultArr[p]+'</p>');
                    document.write('</td></tr>');
                }
                if(resultArr[p]=="Occasionally"){
                    document.write('<tr><td colspan="2">');
                    document.write('<p>'+(p+1)+'. You answered: '+resultArr[p]+'</p>');
                    document.write('</td></tr>');
                }
                if(resultArr[p]=="Never"){
                    document.write('<tr><td colspan="2">');
                    document.write('<p>'+(p+1)+'. You answered: '+resultArr[p]+'</p>');
                    document.write('</td></tr>');
                }
                if(resultArr[p]=="Not my job"){
                    document.write('<tr><td colspan="2">');
                    document.write('<p>'+(p+1)+'. You answered: '+resultArr[p]+'</p>');
                    document.write('</td></tr>');
                }
                if(p==26){
                    //alert('broken out of summary table creation loop 2');
                }

            }
            document.write('<tr><td>');
            document.write('<table width="100%" border="0">');
            document.write('<tr><td width="80%">');
            document.write('</td>');
            document.write('<td align="center" bgcolor="#CCCCCC">');
            document.write('<a href="javascript:window.print();">Print this page</a>');
            document.write('</td></tr>');
            document.write('</table>');
            document.write('</td></tr>');
        //end summary section
        //bottom bar 
        document.write('<tr>');
            document.write('<td>');
                document.write('<div class="bottombar"></div>');
            document.write('</td>');
        document.write('</tr>');
        //end bottom bar

        //end main table row
        document.write('</tr>');
    document.write('</table>');
    //end main table


        if(totalDoItScore<=325 && totalKnowItScore<=350){
            showLayer("BLBL");
            //document.all['BLBL'].style.visibility = "visible";
        }

        else if(totalDoItScore>325 && totalDoItScore<=650 && totalKnowItScore<=350){
            showLayer("BLTL");
        }

        else if(totalDoItScore>650 && totalDoItScore<=975 && totalKnowItScore<=350){
            showLayer("BLTL");
        }
        else if(totalDoItScore>650 && totalDoItScore<=975 && totalKnowItScore<=350){
            showLayer("TLBL");
        }

        if(totalDoItScore<=325 && totalKnowItScore>350 && totalKnowItScore<=700){
            showLayer("BLBR");
        }

        else if(totalDoItScore>325 && totalDoItScore<=650 && totalKnowItScore>350 && totalKnowItScore<=700){
            showLayer("BLTR");
        }

        else if(totalDoItScore>975 && totalDoItScore<=1300 && totalKnowItScore>350 && totalKnowItScore<700){
            showLayer("BRTL");
        }

        else if(totalKnowItScore<=350 && totalDoItScore>650 && totalDoItScore<=975){
            showLayer("TLBL");
        }
        else if(totalKnowItScore>350 && totalKnowItScore<=700 && totalDoItScore>650 && totalDoItScore<=975){
            showLayer("TLBR");
        }
        else if(totalDoItScore>975 && totalDoItScore<=1300 && totalKnowItScore<=350){
            showLayer("TLTL");
        }

        else if(totalKnowItScore>350 && totalKnowItScore<=700 && totalDoItScore>975 && totalDoItScore<=1300){
            showLayer("TLTR");
        }
        else if(totalKnowItScore>700 && totalKnowItScore<=1050 && totalDoItScore>975 && totalDoItScore<=1300){
            showLayer("TRTL");
        }
        else if(totalKnowItScore>1050 && totalKnowItScore<=1400 && totalDoItScore>975 && totalDoItScore<=1300){
            showLayer("TRTR");
        }
        else if(totalKnowItScore>700 && totalKnowItScore<=1050 && totalDoItScore>650 && totalDoItScore<=975){
            showLayer("TRBL");
        }
        else if(totalKnowItScore>1050 && totalKnowItScore<=1400 && totalDoItScore>650 && totalDoItScore<=975){
            showLayer("TRBR");
        }
        else if(totalKnowItScore>700 && totalKnowItScore<=1050 && totalDoItScore>325 && totalDoItScore<=650){
            showLayer("BRTL");
        }
        else if(totalKnowItScore>700 && totalKnowItScore<=1050 && totalDoItScore<=350){
            showLayer("BRBL");
        }
        else if(totalKnowItScore>1050 && totalDoItScore<=1400 && totalDoItScore>325 && totalDoItScore<=650){
            showLayer("BRTR");
        }
        else if(totalKnowItScore>1050 && totalKnowItScore<=1400 && totalDoItScore<=350){
            showLayer("BRBR");
        }                


}


</script>

</head>

<body onload="printHTML();">
</body>
</html>

please help me!!!!!!!

Edited 3 Years Ago by pyTony: fixed formatting

Is that really the best way to create the entire content of the page?

Perhaps it's not working because the elements you reference don't exist yet; or shouldn't exist atall. (document.write() breaks a rule in XHTML; Firefox is alot stricter about rules)

Perhaps; it'd work if you took all of the functions that attempt to change the elements that you create with document.write() (which may even be unaddressable by ID) and put them into a new function; which you call after the printHTML function.*

I'd really advise that you take as many of those document.write calls out as you can; make the majority of the page in HTML, and use JS HTML DOM methods if you must create or modify elements dynamically.

Otherwise; it's making your code incredibly difficult to manage and read; and difficult to know exactly how a browser/JS engine is going to interpret it.

*By after; I don't mean call the new function from within the printHTML function. I mean put them into a function called changeHTML for example; and putting this in body onload:

"printHTML();changeHTML();"

Cheers Matt,

I am fairly new to the world of javascript, so the print() function seemed like an easy way to do things. I will re-code a lot of bits to try get rid of the print statements. Also it didnt occur to me that the page wasnt fully loading becuase of a variable not being set maybe.

I will have a look now.

Thanks for the help!

Mike

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