Bonjour,

j'ai du mal à trouver une solution pour ID dans l'un des 2 syntaxes soit input soit select en en html à le charger dans l'identifiant Id du "DIV" , appelé "content" suite le "if (nblig ==0)

pour mon test simple, j'ai mis les 2 input avec ID ="rsl2" avec le "if (nblig ==0) pour voir . ca ne marche pas 

si je mets les apostrophes simples : ID ='rsl2', message erreur  : userCodeAppPanel:27 Uncaught SyntaxError: Unexpected identifier

si je mets les apostrophes doubles : ID :"rsl2" , message erreur : userCodeAppPanel:19 Uncaught TypeError: Cannot set properties of null (setting 'value')

si j'enlève les ID du input et je remplace : " content ='<div id="two">ZERO</div>';" et "content ='<div id="two">sup ZERO</div>';", ca marche  !

alors comment faire pour régler le problème sur ID d'input ?

voici mon petit échantillon ci dessous : ligne n°1807 et 1813

Bonjour, Pas d'image de code totalement inutilisable par copier/coller pour testes éventuels.

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: jscript;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum

-
Edité par AbcAbc6 25 octobre 2021 à 11:39:28

Je suis navré, mais je ne comprend pas ce que tu souhaite faire.

J'ai bien un début d'idée, peut-être...

Bon, quand tu définis le "content", qui en l'occurence est une chaine de caractère correspondant à du HTML, il faut effectivement mixer les guillemets simples et doubles :

let content = '<input type='text'>'; // va te renvoyer une erreur, parce que tu as une chaîne de caractère ( '<input type=' ) puis tout de suite après le mot text

let content2 = '<input type=' + text + '>'; //risque de te renvoyer une erreur, la variable text étant indéfinie

let content3 = '<input type="text" id="' + 'rsl2' + '">'; // là on a quelque chose, content3 vaut '<input type="text" id="rsl2">' qui peut être ajouté dans ton document en utilisant innerHTML = content3;

Bon, à ce stade, content3 est une chaîne de caractère, stockée dans une variable. Elle n'a pas d'attribut "value" !
Si tu veux pouvoir attribuer une value à cet input, il faut d'abord l'ajouter au document. Par exemple, imaginons que tu aies une div ayant pour id 'uneDiv' :

document.getElementById('uneDiv').innerHTML = content3;

A ce stade, et seulement à ce stade, ton document contient un élément ayant pour id "rsl2". Cet élément étant un input, il a un attribut value.

Merci pour votre retour.

Mon but est de visualiser un seul <div> contenant  : l'un est pour "input" avec "disabled SI le nb de lignes < = 1 , ou l'autre  est pour "select" si le nb de ligne plus de 1.

Par exemple :

Dans la table , on contient une seule ligne => on visualise la valeur, remplie dans le ID ="rsl",  à l'écran avec input ET disabled ( equivalent output ).

Sinon, plus qu'une seule ligne => on visualise la liste deroulante ( <select> ) , remplie dans le ID du select , à l'écran.

et ensuite, l'un de ces 2 cas remplit dans l'id du Div = content.

J'espère que mon explication est claire pour vous ...

pour mon test, j'ai ajouté les 3 <Di> dans le html pour voir les résultats

• 1) <div><input  type="text" id ="rsl" style ='background-color: #8F3FAA; font: 18px sans-serif;'></div>  : Resultat  ok :
• 2) <div><input  type="text" id ="' + 'rsl2' + '"></div>  : Résultat ok mais Vide !! ( ici j'ai copié la votre )

• 3) <div id="content">  </div>    : Résultat no ok: message erreur : userCodeAppPanel:19 Uncaught TypeError: Cannot set properties of null (setting 'value')  at userCodeAppPanel:19

-
Edité par BertrandDelcroix1 25 octobre 2021 à 16:41:42

Bonjour,

Tout d'abord, je ne suis pas très opérationnel sur le javascript et html mais, ca progresse peu à peu. alors peut être mon message n'est pas si clair ci dessus, pour vous.

on laisse tomber ca et je vous precise le problème sur ID ="rsl" d'un element <input > . 

j'ai testé plusieurs fois avec les 3 cas diffèrents : var Content, content2 et content3 . sans succès ! 

Alors comment faire pour paraitre le résultat affiché avec input en utilisant ID ="rsl" ?

voici mon test simple ci dessus.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
     <div>
<input  type="text" id ="rsl" style ='background-color: #8F3FFF; font: 18px sans-serif;'>
 </div> 
 <div id="testdiv"> 
  </div>  

   <script>
    console.log('debut');

  // Affichage dans la console     
   var nblect_Serv = 2;
   document.getElementById("rsl").value = nblect_Serv +2;
   console.log('test valeur rsl :'+document.getElementById("rsl").value);  
 
    var content;
      //var content3 = '<input  type="text" id="rsl" disabled >';
      var content2 = '<input  type="text" id ="'+ 'rsl' +'" disabled >';
      console.log('content : '+content2 );

      var content = document.createElement("input");
      content.id = "rsl";
      content.type = "texte";
      content.style ="background-color: #8F3FAA; font: 18px sans-serif;";
   
    document.getElementById("testdiv").appendChild(content);

  //  document.getElementById('testdiv').innerHTML = content;
     console.log('fin'); 
   </script>
  </body>
</html>

si besoin de nous échanger, vous pouvez ecrire en MP. d'avance, merci pour tout

cordialement

Tu ne pourras pas créer un autre élément avec l'id 'rsl', tu en as déjà un dans ton document. l'id est un identifiant unique.
Ensuite, tu as des balises <strong> dans du javascript ( lignes 23 et 27 )

Pour les lignes 26 à 31 ( la méthode que je préfère pour ajouter des éléments au document ), j'utilise plutôt la méthode setAttribute() et du coup je ferais ça :

let content = document.createElement('input');
content.setAttribute('id', 'rsl2');
content.setAttribute('type', 'text');
content.setAttribute('style', 'background-color: #8f3faa; font: 18px sans-serif;');

document.getElementById('testdiv').appendChild(content);

enlève la déclaration de content à la ligne 21 ou le mot-clé var à la ligne 26 ( tu déclare deux fois le même nom de variable ).

Sinon, dans mon exemple plus haut, j'expliquais juste comment jongler entre guillemets simples et doubles quand on fait de la concaténation, et comment on pouvait éventuellement insérer la valeur d'une variable.
Pour ta variable content2, tu peux tout simplement faire :

let content2 = '<input type="text" id="rsl2" disabled >';

/// OU BIEN

let elementId = 'rsl2';

let content3 = '<input type="text" id="' + elementId + '" disabled >';

Alors, selon la méthode utilisée pour créer et insérer le champ dans le document, la méthode pour modifier la valeur n'est pas la même.

Voici ce que je remarque dans ton dernier bloc code :

- ligne 27 : ton document ne contient pas d'élément ayant pour id "rsl", donc cette ligne doit provoquer une erreur.

- ligne 42 : ton document contient déjà un élément ayant pour id "rsl2", tenter d'en insérer un autre ne va pas fonctionner ( l'attribut 'id' est un identifiant unique, il ne doit être utilisé que par un seul élément dans ton document ).

Je ne comprend trop bien ce que tu cherches à faire, je vais quand même tenter de t'aider :

var nblect_Serv = 2;
document.getElementById("rsl2").value = nblect_Serv; //ici tu modifies bien la valeur de ton élément "rsl2"
console.log('test valeur rsl 2:'+document.getElementById("rsl2").value); 
             
//document.getElementById("rsl").value = nblect_Serv +2;
//cette ligne ne peut pas fonctionner : il n'existe pas d'élément ayant pour id "rsl"

//console.log('test valeur rsl:'+document.getElementById("rsl").value);
// Ne fonctionne pas non plus, document.getElementById("rsl") renvoie "null", et donc on ne peut accéder à la propriété "value" de "null"
          
let content = document.createElement('input'); //créé un élément 'input'
content.setAttribute('id', 'rsl'); //Lui attribue un attribut 'id' ayant pour valeur "rsl".
content.setAttribute('type', 'text');//Lui attribue le type text
content.setAttribute('style', 'background-color: #8f3faa; font: 18px sans-serif;');//Lui attribue un style

//content.id = "rsl"; => inutile, tu as déjà attribué un id 'rsl'
//content.type = "text";
//content.style ="background-color: #8F3FAA; font: 18px sans-serif;";

document.getElementById("testdiv").appendChild(content);//Ici tu ajoutes ton élément "rsl"
//document.getElementById("testdiv").innerHTML = content; => Ne fonctionnera pas, tu n'as pas créé une chaîne de caractères correspondant à du HTML

//maintenant que ton élément existe dans le document, tu peux modifier sa value :
document.getElementById("rsl").value = nblect_Serv +2;


//Autre manière de créer un élément, en rédigeant une chaîne de caractère correspondant à du HTML :

let content2 = '<input type="text" id="rsl3" disabled >'; //il faut choisir un id qui n'est pas déjà utilisé
// tu pourrais ici attribuer une value à ton élément :
// let content2 = '<input type="text" id="rsl3" value="' + (nblect_Serv + 4) + '" disabled >';
// attention, si tu ne met pas les parenthèses, tu feras une concaténation ( value="24" ) et non pas une opération mathématique ( value="6" )
//document.getElementById('testdiv1').appendChild(content2); // ne fonctionne pas, 'content2' n'est pas un élément créé en utilisant document.createElement(). C'est une chaîne de caractère, pas un "nodeElement"
document.getElementById("testdiv1").innerHTML = content2;

//Maintenant que ton élément est inséré dans le document, tu peux en modifier la valeur :
document.getElementById('rsl3').value = 6;

-
Edité par LucasWerquin 27 octobre 2021 à 17:13:53

Bonjour,

const elRsl2 = document.getElementById("rsl2");//on évite d'utiliser plusieurs fois la même fonction 

var nblect_Serv = 2;
elRsl2.value = nblect_Serv;
console.log('test valeur rsl 2:' + elRsl2);

//on bouge ça au dessus histoire de résoudre le problème en dessous
const content = document.createElement('input');
content.setAttribute('id', 'rsl');
content.setAttribute('type', 'text');
content.setAttribute('style', 'background-color: #8f3faa; font: 18px sans-serif;');

//ici, tel que c'était présenté, il n'y a pas d'élément avec pour id rsl
//document.getElementById("rsl") renvoie undefined
//il n'y a pas de paramètre value sur undefined => erreur, du coup le reste n'est pas exécuté
//comme tu as déjà stocké l'élément dans une variable, autant le réutiliser
content.value = nblect_Serv + 2;
console.log('test valeur rsl:' + content.value);

//innerHTML afficheras [object HTMLNode] ou quelque chose comme ça
//append() marche bien dans ce cas
document.getElementById("testdiv").append(content);
         
         
const content2 = '<input type="text" id="rsl2" disabled >';
document.getElementById("testdiv1").innerHTML = content2;

const elementId = 'rsl2';
console.log(' elementId pour testdiv2:' + elementId);
//tu peux aussi utiliser `` : `<input type="text" id="${elementId}" disabled >`
const content3 = '<input type="text" id="' + elementId + '" disabled >';
document.getElementById("testdiv2").innerHTML = content3;

un grand merci à piero5673 et LucasWerquin

J'ai testé vos procedures , ca marche !

je comprends mieux maintenant !...

ma dernière question :

En fait, je me demande si l'on devrait mettre "document.getElementById("rsl").value =nblect_Serv +34;" par exemple; toujours  après le chargement des attributs  de la variable comme "content" ? 

par exemple. :

    var nblect_Serv = 2;
    const elementId = 'rsl4';
    console.log(' elementId pour testdiv2:'+ elementId);
////tu peux aussi utiliser `` : `<input type="text" id="${elementId}" disabled >`
    const content3 = '<input type="text" id="' + elementId + '" disabled >';
    document.getElementById("testdiv2").innerHTML = content3;
    document.getElementById("rsl4").value =nblect_Serv +34;

car , au debut je croyais que l'on devrait mettre cette fonction "document.getElementById" au debut, juste avant le developpement . C'est un peu comme " var " !....

je prends l'exemple de piero5673.

ici ca ne fonctionne pas pour la ligne 22 , car, il n'y a pas de " document.getElementById("rsl").value ". 

C 'st la ou j'ai ajouté cette fonction juste après la ligne 22 , ici ca marche !...

alors on est obligé de créer un seul nom d'identifiant unique pour chaque variable affichée. ! est ce bien ca ?

-
Edité par BertrandDelcroix1 27 octobre 2021 à 18:15:08

Tu peux tout faire, y compris attribuer le même id à deux éléments, après ça risque de ne pas bien marcher (de mémoire il n'y a que le 2e qui vas être sélectionné via getElementById par exemple). Normalement un id est unique dans le DOM. 

En js, l'opération la plus coûteuse en ressources c'est la sélection d'éléments dans le DOM (quand tu fais document.getElementById('id') par exemple). C'est mieux de sélectionner tes éléments au début si tu compte les utiliser plus d'une fois. C'est pareil pour les fonctions en général.

Si tu dois te référer plusieurs fois à un élément HTML particulier, il vaut mieux le stocker une fois pour toute dans une variable :

let monElement = document.getElementById('monElement');

// ...

monElement.value = 4;

//...

monElement.style.color = 'red';

//...

monElement.value += 2;

En revanche, par nature un attribut id est un identifiant unique. Je peux pas jurer que ça provoque une erreur de mettre un même id à plusieurs éléments, mais en tout cas c'est une "mauvaise pratique".
Après, il y a l'attribut "class" qui peut être donné à plusieurs éléments. Dans ce cas on les sélectionne tous avec document.getElementsByClassName(), qui renvoie un array d'élément. Même si il n'y a qu'un seul élément ayant cette classe, il se trouvera dans un array, à l'index 0.
Donc dans ce cas on peut préférer la méthode document.querySelector() :

<input type="text" id="rsl" class="mesInputs"/>
<input type="text" id="rsl2" class="mesInputs"/>
<input type="text" id="rsl3" class="mesInputs"/>

let inputsArray = document.getElementsByClassName('mesInputs');
// renvoie [*rsl*, *rsl2*, *rsl3*] ( ce array contient des références aux inputs dont j'ai noté l'id entre astérisques )
// On peut aussi faire comme ça :
let inputsArray2 = document.querySelectorAll('.mesInputs'); // Le paramètre est un selecteur, le même qu'on utiliserait en CSS

let monPremierInput = document.getElementByClassName('mesInputs')[0];
//renvoie une référence vers l'input 'rsl', mais c'est pas du tout la meilleure technique
// C'est mieux comme ça :
let monPremierInput = document.querySelector('.mesInputs'); // renvoie une référence vers le premier élément correspondant au selecteur.

let monDeuxièmeInput = document.getElementsByClassName('mesInputs')[1];
// ou, en tirant parti du array déjà déclaré :
let monDeuxièmeInput = inputsArray[1]
// rappel, le premier se trouve à l'index 0, le deuxième à l'index 1, etc.

Tu devrais (re)lire ce cours :

Écrivez du JavaScript pour le web - OpenClassrooms

La manipulation du DOM est un concept clé du javascript ( côté client ), sans une bonne compréhension de la manipulation du DOM et des eventListeners, difficile de faire du javascript sur une page web.