Code jvs qui fonctionne sous IE 6 et 7 mais pas 8 et Google Chrome

Marsh Posté le 19-08-2009 à 23:02:12

Bonjour à tous,

J'ai un formulaire avec une liste que je remplis ou vide grace à 2 boutons "Ajouter" et "Supprimer":

Code :

<script type="text/javascript">
function ajoutarticle()
{
var opt = document.createElement("OPTION" )
opt.text = document.getElementById('ListeArticleID').value
document.getElementById('panierID').add(opt)
CalculTotal()
}
function Supprimer(list) {
if (list.options.selectedIndex>=0) {
list.options[list.options.selectedIndex]=null;
} else {
alert("Suppression impossible : aucun article sélectionné" );
}
CalculTotal()
}
function CalculTotal() {
if (document.getElementById('LivraisonID').value==1){
document.getElementById('totalID').value = parseInt(document.getElementById('panierID').length) *16 + 2.90
}else{
document.getElementById('totalID').value = parseInt(document.getElementById('panierID').length) *16
}
}
</script>

Bouton Ajouter:

Code :

<label>
<input type="button" name="btn_ajouter" id="btn_ajouter" value="Ajouter au panier" onclick="ajoutarticle()" />
</label>

Bouton supprimer un item:

Code :

<label>
<input type="button" name="btnsuppr" id="btnsuppr" value="Supprimer cet article" onclick="Supprimer(this.form.panierID)" />
</label>

Ca fonctionne nikel sur IE 6 et 7,mais pas sur la 8,ni sur Google Chrome. [:matleflou]

Quelqu'un peut me dire ce qu'il faut faire pour que ca tourne [:delarue3]

Petite question au passage,c'est possible de mettre la valeur de ma textebox "Total" comme value la dedans? :

Code :

<input type="hidden" name="amount" value="Ma textbox Total" >

Message édité par 4lkaline le 19-08-2009 à 23:06:07

---------------
"Qu'est-ce que je vais devenir ? Je suis ministre, je ne sais rien faire !" Saluste (la Folie des Grandeurs)

Reply

Marsh Posté le 19-08-2009 à 23:02:12

Reply

Marsh Posté le 19-08-2009 à 23:22:53

Je dirais que ton erreur vient de là :

Code :

<input type="button" name="btnsuppr" id="btnsuppr" value="Supprimer cet article" 
       onclick="Supprimer(this.form.panierID)" />

J'aurais plutôt mis :

Code :

<input type="button" name="btnsuppr" id="btnsuppr" value="Supprimer cet article"  
       onclick="Supprimer(document.getElementById('panierID'))" />

Sinon quelques remarques :

input dans un label, pas sûr que ça serve à quelque chose.
la propriété .length est déjà un entier, pas besoin de faire un parseInt() dessus.

Reply

Marsh Posté le 19-08-2009 à 23:29:44

Merci de ton aide,je vais tester ca.
J'ai oublié de préciser le "ca ne marche pas",en fait c'est le bouton Ajouter qui ne fonctionne pas,quand je clique dessus rien ne se passe.(De ce fait je ne peux pas tester "Supprimer" )

Message édité par 4lkaline le 19-08-2009 à 23:38:56

---------------
"Qu'est-ce que je vais devenir ? Je suis ministre, je ne sais rien faire !" Saluste (la Folie des Grandeurs)

Reply

Marsh Posté le 20-08-2009 à 15:27:23

Ah ouais, effectivement. À tout hasard, si tu as un doctype XHTML, il faut que les noms des éléments soient en minuscule (en HTML tu peux mixer la casse). Donc je ferais un truc du genre :

Code :

var opt = document.createElement("option" )

Message édité par tpierron le 20-08-2009 à 15:28:33

Reply

Marsh Posté le 21-08-2009 à 12:08:34

Bon j'ai tenté de creuser le pourquoi du comment.

Lorsque je clique sur le bouton Ajouter,rien ne se passe comme indiqué avant,et un petit panneau warning jaune apparait en bas dans le coin gauche d'IE8,en cliquant dessus j'ai le détail de l'erreur:

Citation :

Détails de l’erreur de la page Web
Message : Objet requis
Ligne : 18
Caractère : 4
Code : 0

En allant à la ligne 18 de ma page,j'ai trouvé que c'est la ligne ci dessous qui plante:

Citation :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Si je la vire ca fonctionne [:cerveau shay] ,mais la page est dégeu [:matleflou]
Je suis un peu paumé la...

Message édité par 4lkaline le 22-08-2009 à 00:33:26

---------------
"Qu'est-ce que je vais devenir ? Je suis ministre, je ne sais rien faire !" Saluste (la Folie des Grandeurs)

Reply

Marsh Posté le 21-08-2009 à 15:12:36

Oué vu la gestion merdicimale des erreurs sous IE, je te conseille d'utiliser soit un débugguer javascript ou un autre navigateur, et si ce n'est pas trop long, poste le code entier de la page.

Reply

Marsh Posté le 24-08-2009 à 11:33:08

Alors voici le kit graphique que j'ai utilisé (telechargeable sur le site):
http://www.kits-gratuits.net/site/preview.php?id=54

Si vous l'ouvrez avec les nouveaux navigateurs,le menu du haut "Acceuil Portfolio Contact" va être completement décallé vers la haut,si vous l'ouvrez avec IE 6 ou 7,pas de soucis il sera à la bonne place.
Et ce bug fait également planter mon code Jvs.

Si je vire le <!DOCTYPE ,l'affichage est nikel et le code fonctionne,mais ca décalle tous le kit vers la gauche

Message édité par 4lkaline le 24-08-2009 à 11:33:42

---------------
"Qu'est-ce que je vais devenir ? Je suis ministre, je ne sais rien faire !" Saluste (la Folie des Grandeurs)

Reply

Marsh Posté le 24-08-2009 à 15:20:22

Hmm, cet exemple utilise des frames, est-ce aussi le cas de ton site ? Si c'est le cas ton doctype n'est pas bon.

Tout ça pour un bandeau en plus, ça me parait overkill. T'as pas un lien vers le site ou un exemple de code qui foire ?

Reply

Marsh Posté le 24-08-2009 à 17:23:53

Et bien c'est trés simple,j'ai pris le kit graphique tel quel que tu peux downloader ici:
http://www.kits-gratuits.net/kits/kit-41/archive.zip

Et remplace juste le code du fichier index par celui ci:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>MonSite.Com | ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="DC.Language" scheme="RFC3066" content="fr" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="Normal" />
<script type="text/javascript">
function ajoutarticle()
{
var opt = document.createElement("OPTION" )
opt.text = document.getElementById('ListeArticleID').value
document.getElementById('panierID').add(opt)
CalculTotal()
}
function Supprimer(list) {
if (list.options.selectedIndex>=0) {
list.options[list.options.selectedIndex]=null;
} else {
alert("Suppression impossible : aucun article sélectionné" );
}
CalculTotal()
}
function CalculTotal() {
if (document.getElementById('LivraisonID').value==1){
document.getElementById('totalID').value = parseInt(document.getElementById('panierID').length) *16 + 2.90
}else{
document.getElementById('totalID').value = parseInt(document.getElementById('panierID').length) *16
}
}
</script>
</head>
<body>
<div id="page">
<a href="index.htm"><img src="./images/interface/titre.png" alt="Logo" id="logo" /></a>
<ul id="menu">
<li><a href="">Accueil</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Services</a></li>
<li><a href="">Forums</a></li>
</ul>
<h1>VotreSite.Com</h1>
<div id="contenu">
<div id="bloc">
<h2>Créez votre commande:</h2>
<p> </p>
<form id="form1" method="post" action="">
<p>
<label>Articles:
<select name="ListeArticleID">
<option value="1">Ref:1 Objet1</option>
<option value="2">Ref:2 Objet2</option>
<option value="3">Ref:3 Objet3</option>
</select>
</label>
   
<label>
<input type="button" name="btn_ajouter" id="btn_ajouter" value="Ajouter au panier" onclick="ajoutarticle()" />
</label>
</p>
<p> </p>
<p>Votre panier:</p>
<p>
<label>
<select style="width: 220px" name="panierID" size="5" id="panierID">
</select>
</label>
   
<label>
<input type="button" name="btnsuppr" id="btnsuppr" value="Supprimer cet article" onclick="Supprimer(document.getElementById('panierID'))" />
</label>
</p>
<p> </p>
<p>
<label>
<select name="LivraisonID" id="LivraisonID" onchange="CalculTotal()">
<option value="1">Livraison à domicile (2,90)</option>
<option value="2">Remise en main propre sur Paris</option>
</select>
</label>
</p>
<p> </p>
<p><strong>Total:</strong>
<label>
<input name="totalID" type="text" id="totalID" size="6" />
</label>
</p>
<p> </p>
<p> </p>
<p> </p>
</form>
<p class="commentaires"><a href=""><em>6</em> commentaires</a></p>
</div>
<div id="menu_gauche">
<h2>Menu premier</h2>
<ul>
<li><a href="">Un menu</a></li>
<li><a href="">Horizontal</a></li>
<li><a href="">Comme ça</a></li>
<li><a href="">C'est</a></li>
<li><a href="">Vraiment</a></li>
<li><a href="">Pas mal !</a></li>
</ul>
<h2>Menu second</h2>
<ul>
<li><a href="">Un menu</a></li>
<li><a href="">Horizontal</a></li>
<li><a href="">Comme ça</a></li>
<li><a href="">C'est</a></li>
<li><a href="">Vraiment</a></li>
<li><a href="">Pas mal !</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

Je viens de tester,sous IE 7 ca tourne nikel,sous IE8 ou Firefox non....Tu cliques sur ajouter ca ne fait rien...

---------------
"Qu'est-ce que je vais devenir ? Je suis ministre, je ne sais rien faire !" Saluste (la Folie des Grandeurs)

Reply

Marsh Posté le 24-08-2009 à 17:47:14

ca marche sur ie parce qu'ie accepte n'importe quoi comme code... ton pb n'a rien à voir avec ton kit, mais avec ton code JS... je te conseille firefox+ extension firebug pour debugger tout ca...

ca te permettra de voir:

qu'il te manque des ";" à la fin de certaines lignes de JS
que tu utilise getElementById pour récupérer un objet alors qu'il n'a pas d'id mais un name
que la méthode add() sous firefox nécessite 2 arguments (http://www.w3schools.com/htmldom/met_select_add.asp):

ce qui donne ca qui marche très bien chez moi sous FF.

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>MonSite.Com | ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="DC.Language" scheme="RFC3066" content="fr" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="Normal" />
<script type="text/javascript">
function ajoutarticle()
{
var opt = document.createElement("option" );
opt.text = document.getElementById('ListeArticleID').value;
try
{
document.getElementById('panierID').add(opt, null);
}
catch(ex)
{
document.getElementById('panierID').add(opt);
}
CalculTotal()
}
function Supprimer(list) {
if (list.options.selectedIndex>=0) {
list.options[list.options.selectedIndex]=null;
} else {
alert("Suppression impossible : aucun article sélectionné" );
}
CalculTotal()
}
function CalculTotal() {
if (document.getElementById('LivraisonID').value==1){
document.getElementById('totalID').value = parseInt(document.getElementById('panierID').length) *16 + 2.90;
}else{
document.getElementById('totalID').value = parseInt(document.getElementById('panierID').length) *16 ;
}
}
</script>
</head>
<body>
<div id="page">
<a href="index.htm"><img src="./images/interface/titre.png" alt="Logo" id="logo" /></a>
<ul id="menu">
<li><a href="">Accueil</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Services</a></li>
<li><a href="">Forums</a></li>
</ul>
<h1>VotreSite.Com</h1>
<div id="contenu">
<div id="bloc">
<h2>Créez votre commande:</h2>
<p> </p>
<form id="form1" method="post" action="">
<p>
<label>Articles:
<select name="ListeArticleID" id="ListeArticleID">
<option value="1">Ref:1 Objet1</option>
<option value="2">Ref:2 Objet2</option>
<option value="3">Ref:3 Objet3</option>
</select>
</label>
   
<label>
<input type="button" name="btn_ajouter" id="btn_ajouter" value="Ajouter au panier" onclick="ajoutarticle()" />
</label>
</p>
<p> </p>
<p>Votre panier:</p>
<p>
<label>
<select style="width: 220px" name="panierID" size="5" id="panierID">
</select>
</label>
   
<label>
<input type="button" name="btnsuppr" id="btnsuppr" value="Supprimer cet article" onclick="Supprimer(document.getElementById('panierID'))" />
</label>
</p>
<p> </p>
<p>
<label>
<select name="LivraisonID" id="LivraisonID" onchange="CalculTotal()">
<option value="1">Livraison à domicile (2,90)</option>
<option value="2">Remise en main propre sur Paris</option>
</select>
</label>
</p>
<p> </p>
<p><strong>Total:</strong>
<label>
<input name="totalID" type="text" id="totalID" size="6" />
</label>
</p>
<p> </p>
<p> </p>
<p> </p>
</form>
<p class="commentaires"><a href=""><em>6</em> commentaires</a></p>
</div>
<div id="menu_gauche">
<h2>Menu premier</h2>
<ul>
<li><a href="">Un menu</a></li>
<li><a href="">Horizontal</a></li>
<li><a href="">Comme ça</a></li>
<li><a href="">C'est</a></li>
<li><a href="">Vraiment</a></li>
<li><a href="">Pas mal !</a></li>
</ul>
<h2>Menu second</h2>
<ul>
<li><a href="">Un menu</a></li>
<li><a href="">Horizontal</a></li>
<li><a href="">Comme ça</a></li>
<li><a href="">C'est</a></li>
<li><a href="">Vraiment</a></li>
<li><a href="">Pas mal !</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

Message édité par pataluc le 24-08-2009 à 17:48:44

Reply

Marsh Posté le 24-08-2009 à 17:47:14

Reply

Marsh Posté le 24-08-2009 à 20:40:55

Citation :

qu'il te manque des ";" à la fin de certaines lignes de JS

Je n'en mettais jamais [:matleflou]

Citation :

que tu utilise getElementById pour récupérer un objet alors qu'il n'a pas d'id mais un name

Corrigé et ca fonctionne [:cerveau shay]

Et effectivement faut que je telecharge un outils pour compiler mon code [:cerveau spamafote]

Par contre,pour le menu en haut,je sais pas ce que ca donne sous FF,mais sous IE8,ca me le décale completement en haut,une idée du pourquoi?

Sinon j'avais une question également dans mon premier post:

Code :

<input type="hidden" name="amount" value="Ma textbox totalID" >

C'est quoi la syntaxe ici pour mettre la valeur de la textbox "totalID" :??:

En tous cas merci beaucoup pour votre aide!

Message édité par 4lkaline le 24-08-2009 à 20:41:22

---------------
"Qu'est-ce que je vais devenir ? Je suis ministre, je ne sais rien faire !" Saluste (la Folie des Grandeurs)

Reply

Code jvs qui fonctionne sous IE 6 et 7 mais pas 8 et Google Chrome

Sujets relatifs:

Leave a Replay