SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Javascript table color

    Hi i need help.
    I've a tableand i want
    Hi,I immediately explain my problem.
    I have a table for color by sending on a button that is connected to a page javascript.
    The table is colorful but not the color remains on the page, if I put an alert box after the function table is colorful, I clicl ok sull'alert box and the color disappears someone knows why?
    This is the code of index.htm:
    HTML Code:
    <html>
     <head >
      <title>Questionario</title>
      <style type="text/css">
        h1      {color: #FFCC00;  font-size: 25px;  font-family: Verdana; }
        
        button  {width: 120px;  height: 35px; border: 0;  cursor: pointer;  Text-align:center;  font:bold 20px/30px "Trebuchet MS",Arial,sans-serif;
                background: #55CB00 url(base.png) no-repeat 0 0;color:#FFF
                }
    
        button:hover{background-position: 0 -35px;color: #FFC}
        button:active{background-position: 0 -70px;color: #FFF}
            
       td { background-color: #FFFFAF; font-size: 12px; font-family: Verdana; }
      </style>
    
    
     <SCRIPT LANGUAGE="JavaScript" src="questionario.js">
    
    </SCRIPT>
    
    
     </head>
    <body onload="importXML();" "background="sfondo1.jpg" body vlink="white"body link="white">
    
    <form method='post' name='form1' id='form1' >
    
    <h2><h1 align="center"> Questionario</h1></h2>
    <hr>
    <div id="Stampa"></div>
    <div id="Stampa1"></div>
    <hr>
    <h1 align="center">
    
    <button input type="submit" name="invia" id="invia" value="Invia" onclick='controllo(); ' >Correggi</button>
    <button><input type="reset" value="Reset">Reset</button></h1>
    </form>
    
    
    
    
    <form action="index.html">
    <h1 align="center">
    <button input type="submit" value="Cambia Materia"><font size=2>Cambia Materia</font></button>
    </form>
    
    
    
    </body>
    </html>
    the js take a xml node and print the value on the radio button..
    and this the code of controllo.js:
    Code:
    var caci,risp;
    xmlDoc = null;
    culo=0;
    c=0;
    c1="#FFFAF";
    c2="#FFFAF";
    c3="#FFFAF";
    c4="#FFFAF";
    base="#FFFFFF";
    base2="#FFFF66";
    que="#99CCFF";
    sbagliato = "#FF3300";
    giusto = "#00FF00";
    var kammy = new Array(4);
    
    
    function importXML()
    {
    
    var XMLFile = "file.xml";
    	if (document.implementation && document.implementation.createDocument)
    	{
    		xmlDoc = document.implementation.createDocument("", "", null);
    		xmlDoc.onload = Visual;
    		xmlDoc.load(XMLFile);
    
    	}
    	else if (window.ActiveXObject)
    	{
    		xmlDoc = new ActiveXObject("MSXML2.DOMDocument");
    		xmlDoc.onreadystatechange = function () {
    			if (xmlDoc.readyState == 4) Visual()
    		};
    		xmlDoc.load(XMLFile);
    
     	}
    	else
    	{
    		alert('Your browser can't handle this script');
    		return;
    	}
    }
    
    
    
    
    
    function Visual()
    {
    
      var x = xmlDoc.getElementsByTagName("domanda").length;
      var y = xmlDoc.getElementsByTagName("domanda");
      var text = "";
      for (i=0; i < x;i++)
      {
      if((i&#37;2)==0){c1=base2;c2=base2;c3=base2;c4=base2;}else{c1=base;c2=base;c3=base;c4=base;}
       
      
    	text += "<table bgcolor='#F9F9F9' align='center' width='50%' border='1' bordercolor='#CCCCCC'>"
    	text += "<tr>"
    	text += "<td colspan='2'background='testo.jpg'>"
    	text += "<b><font color=white>" + y[i].childNodes[0].nodeValue + "</font></b>"
        text +=  "</td>"     
        text +=  "</td>"
    		text += "<tr>"
    			text += "<td style='background-color:"+c1+";'width='50%'><input type='radio' class='caselle' value=\"1\" name=\"risp" + (i+1) + "\" >"+ y[i].getElementsByTagName("risp1")[0].childNodes[0].nodeValue + "</td>"
    			text += "<td style='background-color:"+c2+";'width='50%'><input type='radio' class='caselle' value=\"2\" name=\"risp" + (i+1) + "\" >"+ y[i].getElementsByTagName("risp2")[0].childNodes[0].nodeValue + "</td>"
    			text += "</tr>"  
    			text += "<tr>"
    			text += "<td style='background-color:"+c3+";'width='50%'><input type='radio' class='caselle' value=\"3\" name=\"risp" + (i+1) + "\" >"+ y[i].getElementsByTagName("risp3")[0].childNodes[0].nodeValue +" </td>"
    			text += "<td style='background-color:"+c4+";'width='50%'><input type='radio' class='caselle' value=\"4\" name=\"risp" + (i+1) + "\" >"+ y[i].getElementsByTagName("risp4")[0].childNodes[0].nodeValue +" </td>"
    			text += "</tr>"
    	
    			kammy[i] = y[i].getElementsByTagName("risp5")[0].childNodes[0].nodeValue;
    	text += "</table>"
    	text += "<br>"
    	}
    	text+="</body></html>";
    Stampa.innerHTML = text;
    return;
    }	
    
    function controllo()	
    {
    var text="";
    vet = new Array(2);
    vet[0]="risp"
    vet[1]=1;
    ciao = vet.join("");
    var x = xmlDoc.getElementsByTagName("domanda");
    var y = xmlDoc.getElementsByTagName("domanda").length;
    cascii = document.getElementsByName(ciao).length;
    f=0,caci=0,i=0, z=0, n=0,nr=0;
    
    for (vet[1]=1, i=0; vet[1] <= y;vet[1]++, ciao = vet.join(""), i++,f++)
    {	 
    	text += "<table bgcolor='#F9F9F9' align='center' width='50%' border='1' bordercolor='#CCCCCC'>"
    	text += "<tr>"
    	text += "<td colspan='2'background='testo.jpg'>"
    	text += "<b><font color=white>" + x[i].childNodes[0].nodeValue + "</font></b>"
        text +=  "</td>"     
        text +=  "</td>"
    	scelta=0;
      	for (j=0; j<cascii; j++)
    		{
    			if(document.getElementsByName(ciao)[j].checked==true)//controlla se la casella &#232; spuntata
    			{
    				scelta=document.getElementsByName(ciao)[j].value;
    			}
    		}
        if(scelta==0)//controllo se almeno una &#232; selezionata, se &#232; selezionata scelta avr&#224; un valore diverso da 0
        { nr++;c1="orange";c2="orange";c3="orange";c4="orange"; }
        else
    	{   	
    	if(scelta!=kammy[f])  { n++;
    			if (scelta==1){c1=sbagliato;}else{   if((i%2)==0){c1=base2;}else{c1=base;}}// rosso = #FF3300
          if (scelta==2){c2=sbagliato;}else{   if((i%2)==0){c2=base2;}else{c2=base;}}
          if (scelta==3){c3=sbagliato;}else{   if((i%2)==0){c3=base2;}else{c3=base;}}
          if (scelta==4){c4=sbagliato;}else{   if((i%2)==0){c4=base2;}else{c4=base;}}
    	}//se scelta &#232; diversa da kammy(ke &#232; quella giusta) si incrementa n(sbagliate)
    	if(scelta==kammy[f])  { z++;
    				if (scelta==1){c1=giusto;}else{if((i%2)==0){c1=base2;}else{c1=base;}}// rosso = #FF3300
            if (scelta==2){c2=giusto;}else{if((i%2)==0){c2=base2;}else{c2=base;}}
            if (scelta==3){c3=giusto;}else{if((i%2)==0){c3=base2;}else{c3=base;}}
            if (scelta==4){c4=giusto;}else{if((i%2)==0){c4=base2;}else{c4=base;}}
    	}//se scelta &#232; uguale a kammy(ke &#232; quella giusta) si incrementa z(giuste)	
    	}
    
    		if(kammy[f]==1){c1=giusto} // verde = #00FF00
    		if(kammy[f]==2){c2=giusto}
    		if(kammy[f]==3){c3=giusto}
    		if(kammy[f]==4){c4=giusto}
    		
    			text += "<tr>"
    			text += "<td style='background-color:"+c1+";'width='50%'><input type='radio' class='caselle' value=\"1\" name=\"risp" + (i+1) + "\" >"+ x[i].getElementsByTagName("risp1")[0].childNodes[0].nodeValue + "</td>"
    			text += "<td style='background-color:"+c2+";'width='50%'><input type='radio' class='caselle' value=\"2\" name=\"risp" + (i+1) + "\" >"+ x[i].getElementsByTagName("risp2")[0].childNodes[0].nodeValue + "</td>"
    			text += "</tr>"  
    			text += "<tr>"
    			text += "<td style='background-color:"+c3+";'width='50%'><input type='radio' class='caselle' value=\"3\" name=\"risp" + (i+1) + "\" >"+ x[i].getElementsByTagName("risp3")[0].childNodes[0].nodeValue +" </td>"
    			text += "<td style='background-color:"+c4+";'width='50%'><input type='radio' class='caselle' value=\"4\" name=\"risp" + (i+1) + "\" >"+ x[i].getElementsByTagName("risp4")[0].childNodes[0].nodeValue +" </td>"
    			text += "</tr>"
    				text += "</table>"
    	text += "<br>"
    	
    }
    text += "<hr>"
    	text += "<table bgcolor='#F9F9F9' align='center' width='500' border='1' bordercolor='#CCCCCC'>"
    	text += "<tr>"
    	text += "<td style='background-color:"+giusto+";'><center><b>Risposte corrette</b></td>"
    	text += "<td style='background-color:"+sbagliato+";'><center><b>Risposte sbagliate</b></td>"
    	text += "<td style='background-color:orange'><center><b>Risposte non selezionate</b></td>"
    	text += "</tr>"
    	text +="<tr><td style='background-color:"+giusto+";'><center>"+z+"</td>"
    	text +="<td style='background-color:"+sbagliato+";'><center>"+n+"</td>"
    	text +="<td style='background-color:orange'><center>"+nr+"</td>"
    	text += "</table>"
    
    text+="</body></html>";
    alert(text);
    Stampa.innerHTML = text;
    alert(Stampa);
    return;
    }
    and this is the xml :
    Code:
    <Informatica>
    <domanda>
    	Il nome dell'ultimo sistema operativo microsoft?
    	<risp1>Vista</risp1>
          <risp2>Longhorn</risp2>
          <risp3>2008</risp3>
          <risp4>2007</risp4>
    	  <risp5>1</risp5>
    	</domanda>
     </Informatica>
    sorry for my english but i'm italian.
    For question contact me.
    Last edited by KakashiZombie; Jun 3, 2008 at 10:42.

  2. #2
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Up

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Make sure you return false from all your button clicks, or the default action will occur which is to submit the form. Maybe this is happening causing your colours to disappear.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •