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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Code jvs qui fonctionne sous IE 6 et 7 mais pas 8 et Google Chrome

Profil supprimé

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 Profil supprimé le 19-08-2009 à 23:06:07

Publicité

tpierron

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.

Profil supprimé

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 Profil supprimé le 19-08-2009 à 23:38:56

tpierron

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

Profil supprimé

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 Profil supprimé le 22-08-2009 à 00:33:26

tpierron

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.

Profil supprimé

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 Profil supprimé le 24-08-2009 à 11:33:42

tpierron

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 ?

Profil supprimé

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...

pataluc

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

Publicité

Profil supprimé

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 Profil supprimé le 24-08-2009 à 20:41:22

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Bouton Supprimer ... fonctionne pas ...	verification code chargement java appelant un fichier prolog via jpl
Google Earth dans un site Web	Probleme de code java /LDAP
[Résolu] Placer le code source d'une page web en buffer (Winnet)	strip_tags ne fonctionne pas
[ajax] Mon readyState ne dépasse pas 1 avec IE	Référencement Google Actualités
[VBA]ouvrir un page internet et inscrire un code pour ouvrir undossier	code d'authentification
Plus de sujets relatifs à : Code jvs qui fonctionne sous IE 6 et 7 mais pas 8 et Google Chrome

Page générée en 0.137 secondes