Jump to content

Passing var in url and executing html in switch


Jomathr
 Share

Recommended Posts

Good day to all, I am quite new to web design, started 3 weeks ago so it might seem quite lame of a question but I can't figure it out. I have some links in a page that are passing variable in the url as followed:

<article class="col-1">							<h2>Solutions</h2>							<ul class="solutions">								<li><img src="http://gatesinnovation.com/GATES/Images/icon1.gif"><p>Quel antivirus choisir?</p><a href="Conseils.html#conseil1?ShowTips=Jcon1" <b>Plus</b></a></li>								<li><img src="http://gatesinnovation.com/GATES/Images/icon2.gif"><p>Quel est l'utilité de...</p><a href="Conseils.html#conseil2?ShowTips=Jcon2"><b>Plus</b></a></li>								<li><img src="http://gatesinnovation.com/GATES/Images/icon3.gif"><p>Support à distance?</p><a href="Conseils.html#conseil3?ShowTips=Jcon3"><b>Plus</b></a></li>								<li><img src="http://gatesinnovation.com/GATES/Images/icon4.gif"><p>Les copies de sauvegarde?</p><a href="Conseils.html#conseil4?ShowTips=Jcon4"><b>Plus</b></a></li>							</ul>						</article>

And in the target page I am using a parse function to retrieve the variable from the url and a switch to take action:

[/font]<script type="text/javascript">[/font][font=Verdana, Tahoma, Arial,]var locate = window.locationdocument.varbox.Jvalue.value = locate[/font][font=Verdana, Tahoma, Arial,]var text = document.varbox.Jvalue.value[/font][font=Verdana, Tahoma, Arial,]function delineate(str){	point = str.lastIndexOf("=");	return(str.substring(point+1,str.length));}var ShowTips;ShowTips = delineate(text);alert(ShowTips);switch (ShowTips){	case Jcon1:		alert("I'm in Jcon1");		document.getElementById('Conseil1').style.display = '';		break;  	case Jcon2:	alert("I'm in Jcon2");		document.getElementById('Conseil2').style.display = '';		break;	  	case Jcon3:	alert("I'm in Jcon3");		document.getElementById('Conseil3').style.display = '';		break;	  	case Jcon4:	alert("I'm in Jcon4");		document.getElementById('Conseil4').style.display = '';		break;  	default:		alert("default");		ShowTips= "none";}alert("I'm out");</SCRIPT>

So now I am able to get my variable and the first alert returns correctly "Jcon1" corresponding to the link I clicked but it seem to ignore the rest of the code as none of the following alerts are trigered, not even the last "I'm out" one. Any chance you know why this is happening? any html/JS limitation or conflict that I don't know of that is causing this? I also tried putting it in a function and using onLoad on the body section of my code to call the function. But when I put it in a function, the last alert "I'm out" is working, so this is telling me that it has something to do with the switch bit. Thank for your time

Link to comment
Share on other sites

One problem I see is that in the links the querystring needs to go before the hash and anchor name. Another is that your Javascript code is comparing ShowTips against undefined variables instead of strings, those need to be quoted.

Link to comment
Share on other sites

I tried quoting like you mentionned, the only difference is that now it's seems to be getting into the function since it's going to default and modified my code a bit to make sure that I am comparing to a string

<script type="text/javascript">var locate = window.locationdocument.varbox.Jvalue.value = locatevar text = document.varbox.Jvalue.valuefunction delineate(str){point = str.lastIndexOf("=");return(str.substring(point+1,str.length));}var TipsToStringTipsToString = delineate(text).toString()var ShowTips;ShowTips = new String(TipsToString);alert(ShowTips);function FuncShow(ShowTips){alert("I'm in the function")switch(ShowTips){case "Jcon1":  alert("I'm in Jcon1");  document.getElementById('Conseil1').style.display = '';  break;case "Jcon2":alert("I'm in Jcon2");  document.getElementById('Conseil2').style.display = '';  break; case "Jcon3":alert("I'm in Jcon3");  document.getElementById('Conseil3').style.display = '';  break; case "Jcon4":alert("I'm in Jcon4");  document.getElementById('Conseil4').style.display = '';  break;default:alert("I'm in Default")  alert("default");  ShowTips= "none";}}alert(ShowTips+"I'm out");</SCRIPT>

The first alert is returning Jcon1, but once in the switch, it doesn't enter the Jcon1 case, am I missing something?

Link to comment
Share on other sites

I am calling the function in body

<body id="page4"  onLoad="FuncShow(ShowTips);>

And with the alert inside the function I am getting Fcon1 for ShowTips but it's still going directly to default

Link to comment
Share on other sites

Another interesting fact is that if I put

case Jcon1:  alert("I'm in Jcon1");  document.getElementById('Conseil1').style.display = '';  break;

instead of with quotes

case "Jcon1":  alert("I'm in Jcon1");  document.getElementById('Conseil1').style.display = '';  break;

it seems to get in but I get no alert after the first alert to check the value in the function

Link to comment
Share on other sites

yup I checked and it does return 5, I aleady checked for a whitespace to be sure, I am really unexperience with html, java and other web language but I did bring some good old soft programmings tricks to debug this ;) is there a default type associated to switch in java? string, num, bool? I didn't see any in w3school article

Link to comment
Share on other sites

A few things: window.location isn't a string, it's an object. The thing you're looking for is window.location.href, which is a string containing the URL of the current page. Therefore, window.location.lastIndexOf is not defined, but window.location.href.lastIndexOf is. It seems like switch and if compare differently. With an if statement, this works: if (ShowTips == 'Jcon1') alert('match'); The same isn't true with switch. With switch you need to compare against ShowTips.valueOf(), which is a string value representation of the String object. The reason that's necessary is because you cast the value as a new String. There's a disconnect in Javascript between string values and String objects, they aren't strictly the same thing. The delineate function isn't really that great. It searches for the last equal sign and returns everything after it. There are better ways to split up the querystring and return the value for ShowTips specifically. Here's a version that works, it uses fewer variables on top to do the same thing and I've replaced the alerts with console.log statements to test with.

<html><head><title>test</title><script type="text/javascript">function delineate(str){  point = str.lastIndexOf("=");  return(str.substring(point+1,str.length));}var ShowTips = delineate(window.location.href);console.log(ShowTips);function FuncShow(ShowTips){  console.log("I'm in the function")  console.log(ShowTips);  if (ShowTips == 'Jcon1') console.log('match');  switch(ShowTips)  {    case "Jcon1":	  console.log("I'm in Jcon1");	  break;    case "Jcon2":	  console.log("I'm in Jcon2");	  break;    case "Jcon3":	  console.log("I'm in Jcon3");	  break;    case "Jcon4":	  console.log("I'm in Jcon4");	  break;    default:	  console.log("I'm in Default")	  console.log("default");	  ShowTips= "none";  }}console.log(ShowTips+"I'm out");</SCRIPT></head><body onLoad="FuncShow(ShowTips);"></body></html>

  • Like 1
Link to comment
Share on other sites

sure, the page where the links are code is:

<!DOCTYPE html><html lang="fr"><head><title>GATES Innovation - accueil</title><meta name="description" content="GATES Innovation, la référence en service informatique à domicile pour la Capitale nationale et les environs"><meta name="keywords" content="depannage informatique, dépannage informatique, quebec, québec, technicien informatique, reparation d'ordinateur, réparation d'ordinateur, domicile, support technique, ville de québec, ville de quebec, capitale nationale, windows, office, word, excel"><meta name="author" content="G.A.T.E.S. Innovation"><meta charset="utf-8"><link rel="icon" href="http://www.gatesinnovation.com/GATES/Images/GATES16x16.ico" type="image/x-icon" /><link rel="stylesheet" href="css/reset.css" type="text/css" media="all"><link rel="stylesheet" href="css/layout.css" type="text/css" media="all"><link rel="stylesheet" href="css/style.css" type="text/css" media="all"><script type="text/javascript" src="js/maxheight.js"></script><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="js/cufon-yui.js"></script><script type="text/javascript" src="js/cufon-replace.js"></script><script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script><script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script><script type="text/javascript" src="js/jquery.faded.js"></script><script type="text/javascript" src="js/jquery.jqtransform.js"></script><script type="text/javascript" src="js/script.js"></script><script type="text/javascript">$(function(){  $("#faded").faded({   speed: 500,   crossfade: true,   autoplay: 10000,   autopagination:false  });   $('#domain-form').jqTransform({imgPath:'jqtransformplugin/img/'});});</script><!--[if lt IE 7]><script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script><![endif]--><!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><body id="page1" onLoad="new ElementMaxHeight();"><div class="tail-top"><!-- header --><header>  <div class="container">    <div class="header-box">    <div class="left">	  <div class="right"><img src="Images/Logo_thin.png" width="283" height="77" alt="logo_GATES">	    <nav>	   <ul>   	    <li class="current"><a href="index.html">Accueil</a></li>	    <li><a href="PME.html">PME</a></li>	    <li><a href="Tarifs.html">Tarifs</a></li>	    <li><a href="Conseils.html">Conseils</a></li>	    <li><a href="support.html">Support</a></li>	    <li><a href="contacts.php">Nous joindre</a></li>	   </ul>	  </nav>	  </div>    </div>	   </div>   <span class="top-info">Nous joindre: (418) 614-6696    l    <a href="#">Promotion</a></span>  </div></header><!-- content --><section id="content"><div class="inner_copy">More <a href="http://www.templatemonster.com/">Website Templates</a> at TemplateMonster.com!</div>  <div class="container">   <div id="faded">    <ul class="slides">	 <li><img src="http://gatesinnovation.com/GATES/Images/slide-titleG2.gif"></li>	 <li><img src="http://gatesinnovation.com/GATES/Images/slide-titleG4.gif"></li>	 <li><img src="http://gatesinnovation.com/GATES/Images/slide-titleG3.gif"></li>	 <li><img src="http://gatesinnovation.com/GATES/Images/slide-titleG5.gif"></li>    </ul>    <ul class="pagination">	 <li><a href="#" rel="0"><span>À domicile</span><small>Plus de détails</small></a></li>	 <li><a href="#" rel="1"><span>Réparation</span><small>Plus de détails</small></a></li>	 <li><a href="#" rel="2"><span>Installation</span><small>Plus de détails</small></a></li>	 <li><a href="#" rel="3"><span>Support</span><small>Plus de détails</small></a></li>    </ul>   </div>   <div class="inside">    <div class="wrapper row-1">	 <div class="box col-1 maxheight">	  <div class="border-right maxheight">	   <div class="border-bot maxheight">	    <div class="border-left maxheight">		 <div class="left-top-corner maxheight">		  <div class="right-top-corner maxheight">		   <div class="right-bot-corner maxheight">		    <div class="left-bot-corner maxheight">			 <div class="inner">			  <h3>Nouveau PC</h3>			  <ul class="info-list">			   <li><span>Installation de Windows</span>XP/7</li>			   <li><span>Configuration matériel</span></li>			   <li><span>Configuration du router</span></li>			   <li><span>Mise à jour</span></li>			   <li><span>Ceuillette et livraison</span></li>			  </ul>			  <span class="price">$ 124.95</span>			  <div class="aligncenter"><a href="#" class="link1"><span><span>Informations!</span></span></a></div>			 </div>		    </div>		   </div>		  </div>		 </div>	    </div>	   </div>	  </div>	 </div>	 <div class="box col-2 maxheight">	  <div class="border-right maxheight">	   <div class="border-bot maxheight">	    <div class="border-left maxheight">		 <div class="left-top-corner maxheight">		  <div class="right-top-corner maxheight">		   <div class="right-bot-corner maxheight">		    <div class="left-bot-corner maxheight">			 <div class="inner">			  <h3>Réinstallation</h3>			  <ul class="info-list">			   <li><span>Formattage des disques</span></li>			   <li><span>Installation de Windows</span>XP/7</li>			   <li><span>Configuration du router</span></li>			   <li><span>Configuration périphériques</span></li>			   <li><span>Ceuillette et livraison</span></li>			  </ul>			  <span class="price">$ 139.95</span>			  <div class="aligncenter"><a href="#" class="link1"><span><span>Informations!</span></span></a></div>			 </div>		    </div>		   </div>		  </div>		 </div>	    </div>	   </div>	  </div>	 </div>	 <div class="box col-3 maxheight">	  <div class="border-right maxheight">	   <div class="border-bot maxheight">	    <div class="border-left maxheight">		 <div class="left-top-corner maxheight">		  <div class="right-top-corner maxheight">		   <div class="right-bot-corner maxheight">		    <div class="left-bot-corner maxheight">			 <div class="inner">			  <h3>Réinstallation+</h3>			  <ul class="info-list">			   <li><span>Formattage des disques</span></li>			   <li><span>Installation de Windows</span>XP/7</li>			   <li><span>Transfert de vos données</span></li>			   <li><span>Mise à jour</span></li>			   <li><span>Ceuillette et livraison</span></li>			  </ul>			  <span class="price">$ 199.95</span>			  <div class="aligncenter"><a href="#" class="link1"><span><span>Informations!</span></span></a></div>			 </div>		    </div>		   </div>		  </div>		 </div>	    </div>	   </div>	  </div>	 </div>	 <div class="box col-4 maxheight">	  <div class="border-right maxheight">	   <div class="border-bot maxheight">	    <div class="border-left maxheight">		 <div class="left-top-corner maxheight">		  <div class="right-top-corner maxheight">		   <div class="right-bot-corner maxheight">		    <div class="left-bot-corner maxheight">			 <div class="inner">			  <h3>Grand ménage</h3>			  <ul class="info-list">			   <li><span>Dépoussièrage</span></li>			   <li><span>Maintenance préventive</span></li>			   <li><span>Élimination de virus</span></li>			   <li><span>Mise à jour</span></li>			   <li><span>Ceuillette et livraison</span></li>			  </ul>			  <span class="price">$ 74.95</span>			  <div class="aligncenter"><a href="#" class="link1"><span><span>Informations!</span></span></a></div>			 </div>		    </div>		   </div>		  </div>		 </div>	    </div>	   </div>	  </div>	 </div>    </div>    <div class="inside1">	 <div class="wrap row-2">	  <article class="col-1">	   <h2>Solutions</h2>	   <ul class="solutions">	    <li><img src="http://gatesinnovation.com/GATES/Images/icon1.gif"><p>Quel antivirus choisir?</p><a href="Conseils.html#conseil1?ShowTips=Jcon1" <b>Plus</b></a></li>	    <li><img src="http://gatesinnovation.com/GATES/Images/icon2.gif"><p>Quel est l'utilité de...</p><a href="Conseils.html#conseil2?ShowTips=Jcon2"><b>Plus</b></a></li>	    <li><img src="http://gatesinnovation.com/GATES/Images/icon3.gif"><p>Support à distance?</p><a href="Conseils.html#conseil3?ShowTips=Jcon3"><b>Plus</b></a></li>	    <li><img src="http://gatesinnovation.com/GATES/Images/icon4.gif"><p>Les copies de sauvegarde?</p><a href="support.html#SDistance?ShowTips=Jcon1"><b>Plus</b></a></li>	   </ul>	  </article>	  <article class="col-2">	   <h2>Quoi de neuf chez G.A.T.E.S. Innovation?</h2>	   <p>5 Avril 2012: GATES Innovation participe au finacement pour un séminaire en Chine des élèves de </p><a href="http://academiedartsmartiaux.com/" target="_blank"><p>l'Académie des arts martiaux du Québec</p></a>	   <p>5 Avril 2012: GATES Innovation est fier de vous présenter son site web!</p>	   <a href="#" class="link2"><span><span>En savoir davantage</span></span></a>	  </article>	  <div class="clear"></div>	 </div>    </div>   </div>  </div></section></div><!-- aside --><aside><div class="container">  <div class="inside">   <div class="line-ver1">    <div class="line-ver2">	 <div class="line-ver3">	  <div class="wrapper line-ver4">	   <ul class="list col-1">	   	    <li><a href="#">Historique</a></li>	   	   </ul>	   <ul class="list col-2">	   	    <li><a href="#">Carrière</a></li>	   </ul>	   <ul class="list col-3">	   	    <li><a href="#">Information sur l'entreprise</a></li>	   </ul>	   <ul class="list col-4">	   	    <li><a href="#">Nouvelles</a></li>	   </ul>	   <ul class="list col-5">	   	    <li><a href="#">Nous joindre</a></li>	   </ul>	  </div>	 </div>    </div>   </div>  </div></div></aside><!-- footer --><footer><!-- <div class="container">  <div class="inside">   <a href="http://www.templatemonster.com" class="new_window">Website template</a> designed by TemplateMonster.com<br>   <a href="http://www.templates.com/product/3d-models/" class="new_window">3D Models</a> provided by Templates.com  </div></div> --></footer><script type="text/javascript"> Cufon.now(); </script></body></html>

and the code for the target page is:

<!DOCTYPE html><html lang="fr"><head><title>Gates Innovation - Conseils informatique</title><meta name="description" content="GATES Innovation, la référence en service informatique à domicile pour la Capitale nationale et les environs"><meta name="keywords" content="depannage informatique, dépannage informatique, quebec, québec, technicien informatique, reparation d'ordinateur, réparation d'ordinateur, domicile, support technique, ville de québec, ville de quebec, capitale nationale, windows, office, word, excel"><meta name="author" content="G.A.T.E.S. Innovation"><meta charset="utf-8"><link rel="icon" href="http://www.gatesinnovation.com/GATES/Images/GATES16x16.ico" type="image/x-icon" /><link rel="stylesheet" href="css/reset.css" type="text/css" media="all"><link rel="stylesheet" href="css/layout.css" type="text/css" media="all"><link rel="stylesheet" href="css/style.css" type="text/css" media="all"><script type="text/javascript" src="js/maxheight.js"></script><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="js/cufon-yui.js"></script><script type="text/javascript" src="js/cufon-replace.js"></script><script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script><script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script><script type="text/javascript" src="js/script.js"></script><script type="text/javascript" src="js/Text_Changer.js"></script><!--[if lt IE 7]><script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script><![endif]--><!--[if lt IE 9]>   <script type="text/javascript" src="js/html5.js"></script>  <![endif]--><FORM NAME="varbox"><INPUT TYPE="hidden" NAME="Jvalue"></FORM><script type="text/javascript">var locate = window.locationdocument.varbox.Jvalue.value = locatevar text = document.varbox.Jvalue.valuefunction delineate(str){point = str.lastIndexOf("=");return(str.substring(point+1,str.length));}var TipsToStringTipsToString = delineate(text).toString()var ShowTips;ShowTips = new String(TipsToString);alert(ShowTips);alert (ShowTips.length);function FuncShow(ChkTips){alert(ChkTips+"inside");var varchk = ChkTipsswitch(varchk){case Jcon1:  alert("I'm in Jcon1");  document.getElementById('Conseil1').style.display = '';  break;case "Jcon2":alert("I'm in Jcon2");  document.getElementById('Conseil2').style.display = '';  break; case "Jcon3":alert("I'm in Jcon3");  document.getElementById('Conseil3').style.display = '';  break; case "Jcon4":alert("I'm in Jcon4");  document.getElementById('Conseil4').style.display = '';  break;default:alert("I'm in Default")  alert("default");  ShowTips= "none";}}alert(ShowTips+"I'm out");</SCRIPT></head><body id="page4"  onLoad="FuncShow(ShowTips);" onLoad="new ElementMaxHeight();"><div class="tail-top3"><!-- header --><header>  <div class="container">    <div class="header-box">    <div class="left">	  <div class="right"><img src="Images/Logo_thin.png" width="283" height="77" alt="logo_GATES">	    <nav>	   <ul>   	    <li><a href="index.html">Accueil</a></li>	    <li><a href="PME.html">PME</a></li>	    <li><a href="Tarifs.html">Tarifs</a></li>	    <li class="current"><a href="Conseils.html">Conseils</a></li>	    <li><a href="support.html">Support</a></li>	    <li><a href="contacts.php">Nous joindre</a></li>	   </ul>	  </nav>	  </div>    </div>	 </div>   <span class="top-info">Nous joindre: (418) 614-6696    l    <a href="#">Promotion</a></span>  </div></header><!-- content --><section id="content"><div class="inner_copy">More <a href="http://www.templatemonster.com/">Website Templates</a> at TemplateMonster.com!</div>  <div class="container">   <div class="inside">    <div id="slogan" class="bot-indent1">	 <div class="inside">	  <h2><span>Service aux PME</span> Un service sur mesure</h2>	  <p align="justify">Vous prévoyez agrandir votre PME? Vous avez un parc informatique qui nécéssite un entretien? Vous avez un nouveau projet qui requiert un changement de votre système informatique?	  Nous vous aideront à prévoir vos besoin en matière de technologies, entretenir votre parc existant et vous conseiller pour votre infrastructure concernant de nouveaux projets.</p>	  <p>Procurez vous un bloc d'heure qui peut être utilser pour de la consultation, maintenance ou tout autre besoin relié à vos systèmes informatique. </p>	 </div>    </div>    <div class="wrapper row-1">	 <div class="box col-1 maxheight">	  <div class="border-right maxheight">	   <div class="border-bot maxheight">	    <div class="border-left maxheight">		 <div class="left-top-corner maxheight">		  <div class="right-top-corner maxheight">		   <div class="right-bot-corner maxheight">		    <div class="left-bot-corner maxheight">			 <div class="inner">			  <h3>Nouveau PC</h3>			  <ul class="info-list">			   <li><span>Installation de Windows</span>XP/7</li>			   <li><span>Configuration matériel</span></li>			   <li><span>Configuration du router</span></li>			   <li><span>Mise à jour</span></li>			   <li><span>Ceuillette et livraison</span></li>			  </ul>			  <span class="price">$ 124.95</span>			  <div class="aligncenter"><a href="#" class="link1"><span><span>Informations!</span></span></a></div>			 </div>		    </div>		   </div>		  </div>		 </div>	    </div>	   </div>	  </div>	 </div>	 <div class="box col-2 maxheight">	  <div class="border-right maxheight">	   <div class="border-bot maxheight">	    <div class="border-left maxheight">		 <div class="left-top-corner maxheight">		  <div class="right-top-corner maxheight">		   <div class="right-bot-corner maxheight">		    <div class="left-bot-corner maxheight">			 <div class="inner">			  <h3>Réinstallation</h3>			  <ul class="info-list">			   <li><span>Formattage des disques</span></li>			   <li><span>Installation de Windows</span>XP/7</li>			   <li><span>Configuration du router</span></li>			   <li><span>Configuration périphériques</span></li>			   <li><span>Ceuillette et livraison</span></li>			  </ul>			  <span class="price">$ 139.95</span>			  <div class="aligncenter"><a href="#" class="link1"><span><span>Informations!</span></span></a></div>			 </div>		    </div>		   </div>		  </div>		 </div>	    </div>	   </div>	  </div>	 </div>	 <div class="box col-3 maxheight">	  <div class="border-right maxheight">	   <div class="border-bot maxheight">	    <div class="border-left maxheight">		 <div class="left-top-corner maxheight">		  <div class="right-top-corner maxheight">		   <div class="right-bot-corner maxheight">		    <div class="left-bot-corner maxheight">			 <div class="inner">			  <h3>Réinstallation+</h3>			  <ul class="info-list">			   <li><span>Formattage des disques</span></li>			   <li><span>Installation de Windows</span>XP/7</li>			   <li><span>Transfert de vos données</span></li>			   <li><span>Mise à jour</span></li>			   <li><span>Ceuillette et livraison</span></li>			  </ul>			  <span class="price">$ 199.95</span>			  <div class="aligncenter"><a href="#" class="link1"><span><span>Informations!</span></span></a></div>			 </div>		    </div>		   </div>		  </div>		 </div>	    </div>	   </div>	  </div>	 </div>	 <div class="box col-4 maxheight">	  <div class="border-right maxheight">	   <div class="border-bot maxheight">	    <div class="border-left maxheight">		 <div class="left-top-corner maxheight">		  <div class="right-top-corner maxheight">		   <div class="right-bot-corner maxheight">		    <div class="left-bot-corner maxheight">			 <div class="inner">			  <h3>Grand ménage</h3>			  <ul class="info-list">			   <li><span>Dépoussièrage</span></li>			   <li><span>Maintenance préventive</span></li>			   <li><span>Élimination de virus</span></li>			   <li><span>Mise à jour</span></li>			   <li><span>Ceuillette et livraison</span></li>			  </ul>			  <span class="price">$ 74.95</span>			  <div class="aligncenter"><a href="#" class="link1"><span><span>Informations!</span></span></a></div>			 </div>		    </div>		   </div>		  </div>		 </div>	    </div>	   </div>	  </div>	 </div>    </div>    <div class="inside1">	 <div class="wrap row-2">	  <article class="col-1">				  <h2>Nos conseils</h2>	   <ul class="list1">	    <li><a href="#conseil1" onclick="document.getElementById('Conseil1').style.display = '';		 document.getElementById('Conseil2').style.display = 'none';		 document.getElementById('Conseil3').style.display = 'none';		 document.getElementById('Conseil4').style.display = 'none'";>Quel antivirus choisir?</a></li>	    <li><a href="#Conseil2" onclick="document.getElementById('Conseil1').style.display = 'none';		 document.getElementById('Conseil2').style.display = '';		 document.getElementById('Conseil3').style.display = 'none';		 document.getElementById('Conseil4').style.display = 'none'">La copie de sauvegarde?</a></li>	    <li><a href="#Conseil3" onclick="document.getElementById('Conseil1').style.display = 'none';		 document.getElementById('Conseil2').style.display = 'none';		 document.getElementById('Conseil3').style.display = '';		 document.getElementById('Conseil4').style.display = 'none'">Quel est l'utilité de...</a></li>	   	   </ul>	  </article> 	  <article class="col-2">	   <div id="Conseil1"; style="display:none">	    <h2 id="Titre1">Quel antivirus choisir?</h2>	    <div class="img-box"><img src="http://gatesinnovation.com/GATES/Images/4page-img.jpg"><p id="Conseil1"; align="justify">Il ne manque pas de choix quand vient le temps de choisir un antivirus, mais lequel choisir? </p>	    <p align="justify">La majorité des antivirus sont fiable, bien entendu il faut choisir un antivirus qui vous convient et comprendre qu'aucun antivirus gratuit ou payant n'est fiable à 100% et qu'a lui seul un antivirus ne protège pas completement votre ordinateur.</p>	    <p align="justify">En effet pour efficacement protéger votre système il vous faut également un pare-feu et tout comme les anti-virus il est possible de s'en procurer gratuitement, plus d'information à ce sujet dans notre article "À quoi sert un pare-feu?". Les antivirus sont testés sur plusieurs angles dont leurs capacité à prévenir une infection et leurs capacité à éliminer les virus.</p>	  	    <palign="justify">Donc comment choisir un antivirus? Il existe actuellement plusieurs sites qui font des comparatifs sur les performances des antivirus comme <a href="http://www.clubic.com/article-77079-1-guide-comparatif-meilleur-antivirus.html" target="_blank">celui-ci</a> mais il faut aussi tenir compte de l'effet sur la performance, de la convivialité de l'interface et de la difficulté à installer, paramétrer et utiliser le logiciel.</p>			 	    <p align="justify">Chacun de ces logiciel ont leurs forces et leurs faiblesses; au final le choix d'un antivirus reste un choix personnel en étant en connaissance de cause. Il est évident que les besoins ne seront pas les mêmes pour un ordinateur personnel que pour un vaste réseau en entreprise.</p>			 	    <p align="justify">N'hésitez pas à communiquer avec nous si vous avez besoin de plus de conseils concernant le choix d'un antivirus qui vous convient.</p>	   </div>	   </div>	  	   <div id="Conseil2"; style="display:none">	    <h2 id="Titre1">La copie de sauvegarde</h2>	    <div class="img-box"><img src="http://gatesinnovation.com/GATES/Images/4page-img.jpg">	    <p align="justify">Les copies de sauvegardes aussi appelé "backup" sont essentiel. Elles pouraient vous épargner tracas et argent.</p>	    <p align="justify">Contrairement à ce qu’on pourrait croire, les risques de catastrophe se sont accrus de façon importante. En effet, bien que les risques d’incendie soient toujours présents, la probabilité que vos précieuses informations soient perdues pour d’autres raisons est beaucoup plus élevée. Pour vous convaincre, voici une petite liste de causes possibles :</p>		 <p><ul>		  <li>- Défaillance physique du disque dur;</li>		  <li>- Défaillance du système d’exploitation (Windows);</li>		  <li>- Attaque par un virus, un ver ou toute autre forme de programme malicieux;</li>		  <li>- Défaillance d’une application;</li>		  <li>- Problème électrique;</li>		  <li>- Erreur humaine;</li>		  <li>- Attaque perpétrée par un pirate informatique;</li>		  <li>- etc.</li>		 </ul></p>		 <p  align="justify">Les médias disponibles pour effectuer vos copies de sauvegarde sont nombreux, les cd, dvd, bluRay, clefs USB, disque dur externe, en ligne, serveur distant, bande magnétique etc.		 Pour savoir quel média vous convient, il faut prendre en compte des facteurs comme la quantité de données, la fréquence requise, la rétention de donnée, combien de copie. Chaque cas est unique et requiert une analyse de besoin mais règle générale il faut compter deux copie sur deux média différent et en entreposer un hors des lieu du système où la copie à été prise.</p>		 <p align="justify">Pour une évaluation de vos besoins communiquer avec nous et il notre équipe se fera un plaisir de vous aider à protéger vos données</p>	    </div>	    </div>	   	   <div id="Conseil3"; style="display:none">	    <h2 id="Titre1">Quel est l'utilité de...</h2>	    <div class="img-box"><img src="http://gatesinnovation.com/GATES/Images/4page-img.jpg">	    <p align="justify"> Nous vous présentons quelques informations concernant les bonnes pratique à l'égard de votre ordinateur.</p>	    <h5 align="justify">Quel est l'utilité de dépoussièrer l'intérieur du boîtier de mon ordinateur?</h5>	    <p align="justify">Il est très important de nettoyer ou faire nettoyer l'intérieur de votre boîtier car une grande quantité de poussière peut s'y accumuler dû à la circulation d'air constante dans celui-ci. La poussière peut nuire au bon fonctionnement des pièce mechanique tel que vos ventilateur et par la même occasion nuire au refroidissement des composante tel que votre microprocesseur, votre bloc d'alimentation ou encore votre carte graphique. Ce manque de refroidissement peut occasionner de multiple problème comme des "crash", un système lent causé par la surchauffe du microprocesseur, disfonctionnement des connections (USB, SD, etc.), votre bloc d'alimentation peut completement cesser de fonctionner, cette liste est loin d'être exhaustive mais vous donne un apperçu des problèeme possible. Il est conseiller d'effectuer un dépoussièrage à tout les 3 mois pour s'assurer que votre système fonctionne toujours de façon optimal.</p>	    </div>	    </div>	   </article>	  <div class="clear"></div>	  <h5>  </h5>	  <h5>Vous aimeriez des conseils sur un sujet particulier et vous croyez que ces conseil pourraient aider d'autre propriétaire d'ordinateur? Écrivez-nous vos suggestions</h5>	 </div>    </div>   </div>  </div> </section></div><!-- aside --><aside><div class="container">  <div class="inside">   <div class="line-ver1">    <div class="line-ver2">	 <div class="line-ver3">	  <div class="wrapper line-ver4">	   <ul class="list col-1">	   	    <li><a href="#">Historique</a></li>	   	   </ul>	   <ul class="list col-2">	   	    <li><a href="#">Carrière</a></li>	   </ul>	   <ul class="list col-3">	   	    <li><a href="#">Information sur l'entreprise</a></li>	   </ul>	   <ul class="list col-4">	   	    <li><a href="index.html">Nouvelles</a></li>	   </ul>	   <ul class="list col-5">	   	    <li><a href="#">Nous joindre</a></li>	   </ul>	  </div>	 </div>    </div>   </div>  </div></div></aside><!-- footer --><footer><!-- <div class="container">  <div class="inside">   <a href="http://www.templatemonster.com" class="new_window">Website template</a> designed by TemplateMonster.com<br>   <a href="http://www.templates.com/product/3d-models/" class="new_window">3D Models</a> provided by Templates.com  </div></div> --></footer><script type="text/javascript"> Cufon.now(); </script></body></html>

or you can go to http://www.gatesinnovation.com/GATES/index.html all the links in the nav are working, and for the purpose of testing, you have to click on the "Plus" link bellow "Quel antivirus choisir?" it's the link I am using

Link to comment
Share on other sites

You had to dig up deep to find this one! I always saw switch as a serie of if so it never crossed my mind that it wouldn't compare the same way. I guess it's a specificity of JS. I owe you a big thanks for this one! Any place we can suggest to add that bit of info on the w3school page? I'm sure it would be helpful to other ppl as well. Thank you very much! Kudos

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...