Bonsoir, 

J'essaye d'apprendre le javascript et j'ai réalisé un petit truc que je trouve sympa mais sans doute bidon pour les gens expérimentés...

Il y'a quelque chose que je ne comprends pas. 

J'ai une liste déroulante avec pour option "Oui" et "Non" 

Lorsqu'on choisi Non, rien ne s'affiche (et c'est voulu) 

Lorsqu'on Choisi Oui, un input s'affiche (c'est voulu également) 

Alors jusque là tout va bien voici le code : 

function leaveChange() {

if (document.getElementById("OrderInfoLocation").value != "yes") {
 document.getElementById("InputOrderLocation").innerHTML  = 'Très bien nous allons trouver pour vous.';
  }     
	else {
	  document.getElementById("InputOrderLocation").innerHTML  = 
		'<label class="form-label" for="OrderLocation">Adresse où nous devons faire l\'achat</label> <input class="form-control" id="OrderLocation" name="OrderLocation" class="form-control" placeholder="" />';
	 }        
}

Le problème survient lorsque le <label> et le <input> ne sont pas sur la même ligne alors là la function ne marche plus. 

Pourrais-je avoir une explication ? 

Bonjour alors on évite de faire appelle plusieurs fois à un getter quand c'est non nécessaire, dans le sens où 

si le code du getter est

getElementById(selector)

{

return html

}

il n'y a rien de grave mais imagine que le getter fasse appel à 100 autres fonctions pour renvoyer ton élément ça te fait des appels inutiles.

donc au départ tu peux très bien faire des getElementById puis placer la sortie dans des variables que tu pourras utiliser ensuite dans tes fonctions sans refaire l'appel

ensuite ligne 6 tu commets une erreur html on a un seul attribut class

class="maclass maclass2"

non a class="maclass" class="maclass2" surtout qu'ici tu lui met deux fois la même class

ensuite 'le probleme survidnt quand label et input ne sont pas sur la même ligne' tu pourrais préciser ? (quoi comme problème, comment ça pas sur la même ligne) 

zvheer a écrit:

ensuite 'le probleme survidnt quand label et input ne sont pas sur la même ligne' tu pourrais préciser ? (quoi comme problème, comment ça pas sur la même ligne) 

Merci pour Zvheer pour ton aide mais c'est vraiment trop compliqué pour moi le javascript j'ai laché l'affaire :p 

pour la question que tu n'as pas compris voici pour mieux comprendre :

if (document.getElementById("OrderInfoLocation").value != "yes") {
 document.getElementById("InputOrderLocation").innerHTML  = 'Très bien nous allons trouver pour vous.';
  }    
else {
 document.getElementById("InputOrderLocation").innerHTML  =
'<label class="form-label" for="OrderLocation">Adresse où nous devons faire l\'achat</label> 
<input class="form-control" id="OrderLocation" name="OrderLocation" class="form-control" placeholder="" />';
 }       
}

- le <Label> est sur la ligne 6

- le <input> est sur la ligne 7

Ainsi  le code ne fonctionne pas. et je comprends pas pourquoi, tandis que si je remet le input sur la même ligne que le label, le code fonctionne.

Je crois que c'est un probleme de saut de ligne avec js ??

-
Edité par 93lulu93 5 septembre 2022 à 13:14:43

Bonjour a vous,

contrairement à des langages comme python, JavaScript sépare les instructions par des point-virgules en fin de ligne.

Pour éviter la peine de devoir rechercher des points virgules manquants qui empêcheraient le code de fonctionner, une fonction appelée ASI (Automatic Semicolon Insertion qui veut dire Insertion automatique de point-virgule).

Cette fonction essaie de deviner où tu aurais souhaité mettre les points virgules dans ton code et les ajoute avant de l'exécuter. C'est donc possible d'écrire du JavaScript sans jamais mettre manuellement des point-virgules mais il y a des petites règles à respecter pour éviter des surprises de ce côté là.

En général, si tu renvoi une instruction à la ligne juste pour la lisibilité du code, il est préférable d'encadrer cette instruction entière dans des parenthèses.

Si tu renvoi simplement à la ligne, JS risque de considérer la première partie comme instruction isolée et mettre un point virgule juste après. Du coup la suite perds son sens et sera ignorée à l'exécution.

Cordialement,