getElementById

getElementById - Javascript/Node.js - Programmation

Marsh Posté le 06-12-2021 à 19:58:53    

Bonjour,
 
J'ai un problèmes avec plusieurs textarea,
 
Mon objectif est de limiter un nombre de caractères par ligne.
 
Bien sûr avec un getElementById(la_valeure) ça fonctionne pour un textarea, mais sur ma page j'en ai plusieurs.
 
id=value_tiem_7
id=value_tiem_8
ETC...
 
le code qui fonctionne:

Code :
  1. var boxA = document.getElementById('value_item_7');
  2. var charlimit = 60; // char limit per line
  3. boxA.onkeyup = function() {
  4. var lines = boxA.value.split('\n');
  5. for (var i = 0; i < lines.length; i++) {
  6.  if (lines[i].length <= charlimit) continue;
  7.  var j = 0; space = charlimit;
  8.  while (j++ <= charlimit) {
  9.   if (lines[i].charAt(j) === ' ') space = j;
  10.  }
  11.  lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || "" );
  12.  lines[i] = lines[i].substring(0, space);
  13. }
  14. boxA.value = lines.slice(0, 10).join('\n');
  15. };


 
 
j'ai essayé quelques chose dur genre: (je fais une alerte provisoire juste pour voir si je vois bien les valeurs de l'ID.)
 

Code :
  1. var inputs = document.getElementsByTagName("textarea" );
  2. for (var z = 0; z < inputs.length; z++) {
  3.   alert(inputs[z].id);
  4. }
  5. var boxA = document.getElementById(inputs); 
  6. var charlimit = 60; // char limit per line
  7. boxA.onkeyup = function() {
  8. var lines = boxA.value.split('\n');
  9. for (var i = 0; i < lines.length; i++) {
  10.  if (lines[i].length <= charlimit) continue;
  11.  var j = 0; space = charlimit;
  12.  while (j++ <= charlimit) {
  13.   if (lines[i].charAt(j) === ' ') space = j;
  14.  }
  15.  lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || "" );
  16.  lines[i] = lines[i].substring(0, space);
  17. }
  18. boxA.value = lines.slice(0, 10).join('\n');
  19. };


 
Si quelqu'un pourrait me guider je suis preneur merci !
 
Cédric

Reply

Marsh Posté le 06-12-2021 à 19:58:53   

Reply

Marsh Posté le 06-12-2021 à 22:37:17    

var boxA = document.getElementById(inputs);
inputs est un tableau : ça peut pas marcher :o
 
Par contre, essaye en mettant  tout ce qui vient après la ligne 6 dans ta boucle for() avec boxA = inputs[z];

Message cité 1 fois
Message édité par rufo le 07-12-2021 à 20:08:21

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 07-12-2021 à 12:24:38    

rufo a écrit :

var boxA = document.getElementById(inputs);
inputs est un tableau : ça peut pas marcher :o
 
Par contre, essaye en mettant  tout ce qui vient après la ligne 6 dans tableau for() avec boxA = inputs[z];


 
 
 
 
Merci beaucoup Rufo j'ai fait un poile différent, et dans la boucle cette fois-ci.
 

Code :
  1. var ctrl = Runner.getControl(pageid, 'item');     <--------- comme j'utilise un framework c’était cette ligne qui me manquait!
  2. for (var z = 0; z < ctrl.getDispElem().length; z++) {
  3. alert(ctrl.getDispElem()[z].id);
  6. var boxA = document.getElementById(ctrl.getDispElem()[z].id);
  7. var charlimit = 60; // char limit per line
  8. boxA.onkeyup = function() {
  9. var lines = boxA.value.split('\n');
  10. for (var i = 0; i < lines.length; i++) {
  11.  if (lines[i].length <= charlimit) continue;
  12.  var j = 0; space = charlimit;
  13.  while (j++ <= charlimit) {
  14.   if (lines[i].charAt(j) === ' ') space = j;
  15.  }
  16.  lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || "" );
  17.  lines[i] = lines[i].substring(0, space);
  18. }
  19. boxA.value = lines.slice(0, 10).join('\n');
  20. };
  21. }

Reply

Marsh Posté le 08-12-2021 à 20:01:57    

Pour information, la balise textarea a un attribut "maxlength".
 
Sinon j'utiliserai plutôt un .querySelectorAll(), itérerai sur chaque occurrence pour ajouter un "listener" d'évènement qui appellerait ta fonction pour vérifier la longueur du texte.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 20-11-2022 à 17:48:52    

MaybeEijOrNot a écrit :

Pour information, la balise textarea a un attribut "maxlength".

 

Sinon j'utiliserai plutôt un .querySelectorAll(), itérerai sur chaque occurrence pour ajouter un "listener" d'évènement qui appellerait ta fonction pour vérifier la longueur du texte.

 

Je déterre ce topic avec une question un peu bête dont je n'ai pas trouvé de réponse claire et qui appelle d'autres questions :D.

 

Quelles sont les différences entre querySelector() et getElementById() ?

 

J'ai vu que getElementById() ne permettait à accéder qu'à des objets avec un id alors que querySelector peut aussi accéder à des classes. Mais j'ai sûrement raté un truc plus subtil au niveau du fonctionnement :o.

 

Mon souci est que j'ai une page, où une fonction JS vient remplacer du texte :

Code :
  1. function pageload() {
  2.  fetch("/action/menu" ); // utile côté serveur, aucune influence côté client
  3.  fetch("/page/menu" )
  4.  .then(x => x.text())
  5.  .then(y => document.getElementById("MainW" ).innerHTML = y);
  6. }


Le contenu de cette page dépend de paramètres décidés par le serveur, où un des cas, j'affiche une horloge et une fonction JS doit mettre l'heure à jour, et du texte plus simple dans les autres cas.

 

Ça fonctionne, mais la fonction qui met l'heure à jour me pourrit la console quand l'horloge n'est pas présente, et à raison. J'ai bien essayé de tester l'existance de la variable comme je l'aurais fait en Python, mais là ça fonctionne aussi bien que if(1) :o.

Code :
  1. if(typeof('.hourshand') == 'string') {
  2.  document.querySelector('.hourshand').style.transform = `rotate(${hour}deg)`
  3. }


Comment faudrait-t'il procéder ?

 

Note: j'ai mis en gras les instructions que j'ai varié pour tester, mais sans comprendre la différence :??:.

Message cité 1 fois
Message édité par Manisque le 20-11-2022 à 17:49:15

---------------
Si tu bois froid juste après le potage chaud, ça va faire sauter l'émail de tes dents - Monorailcat iz ohverin
Reply

Marsh Posté le 20-11-2022 à 17:58:13    

getElementById(à recherche un élément par son attribut "id" alors que querySelector() permet de rechercher un élément sur d'autres critères comme un style CSS.

Message cité 1 fois

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 20-11-2022 à 18:22:51    

Manisque a écrit :

Le contenu de cette page dépend de paramètres décidés par le serveur, où un des cas, j'affiche une horloge et une fonction JS doit mettre l'heure à jour, et du texte plus simple dans les autres cas.


Lorsque tu détermines ce cas à partir des paramètres tu lances la fonction JS de mise à jour de l'horloge ou celle du texte. Je ne comprends pas bien le problème, il manque des informations sur le traitement serveur et client dans tes explications.
Soit côté serveur tu décides que le client lancera la fonction, soit tu passes ces paramètres jusqu'au client pour que l'exécution de la fonction se fasse ou non. Tu peux te contenter d'envoyer un paramètre binaire vers le client qui permettra de choisir quelle fonction tu lances.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 20-11-2022 à 18:47:56    

rufo a écrit :

getElementById(à recherche un élément par son attribut "id" alors que querySelector() permet de rechercher un élément sur d'autres critères comme un style CSS.

 

Merci, c'est exactement la réponse que je cherchais :jap:.

 
MaybeEijOrNot a écrit :


Lorsque tu détermines ce cas à partir des paramètres tu lances la fonction JS de mise à jour de l'horloge ou celle du texte. Je ne comprends pas bien le problème, il manque des informations sur le traitement serveur et client dans tes explications.
Soit côté serveur tu décides que le client lancera la fonction, soit tu passes ces paramètres jusqu'au client pour que l'exécution de la fonction se fasse ou non. Tu peux te contenter d'envoyer un paramètre binaire vers le client qui permettra de choisir quelle fonction tu lances.

 

En gros, fetch("/page/menu" ) récupère la page sur le serveur, sauf que le serveur n'envoie pas toujours la même page. Il envoie une horloge analogique quand aucune musique n'est jouée, et une image et du texte correspondants à la musique jouée quand c'est le cas.

 

Si nécessaire, je peux rajouter des infos pour distinguer plus facilement les pages côté client, mais ça me semble peu rigoureux.
Je pensais bêtement protéger l'accès aux éléments non-disponibles en testant leur existance.


Message édité par Manisque le 20-11-2022 à 18:48:34

---------------
Si tu bois froid juste après le potage chaud, ça va faire sauter l'émail de tes dents - Monorailcat iz ohverin
Reply

Marsh Posté le 20-11-2022 à 19:09:38    

Tu peux vérifier l'existence d'un objet ou d'une variable, ça ne pose pas de problème.
À ce moment là, utilise l'opérateur stricte :

Code :
  1. if(mavariable !== 'undefined')


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 20-11-2022 à 19:45:55    

Alors, j'ai adapté le code :

Code :
  1. if(document.querySelector('.hourshand') != 'undefined') {
  2.  document.querySelector('.hourshand').style.transform = `rotate(${hour}deg)` //ligne 85
  3. }
 

Ça fonctionne bien au premier affichage, puis ça me renvoie la même erreur dès que la page est rafraichie et que l'horloge manque.
J'ai exactement le même résultat en testant if('.hourshand' != 'undefined') qui me semble incorrect.

 

La console me renvoie ça :

Uncaught TypeError: document.querySelector(...) is null
    clock http://127.0.0.1:5000/scripts.js:85
    setInterval handler* http://127.0.0.1:5000/scripts.js:2

 


J'ai tenté la solution que tu proposais au début:

 

J'ai rajouté un bloc contenant un texte différent sur chaque page renvoyée, comme ici :

Code :
  1. <div class="id">home</div>
 

Puis je teste la valeur de cette variable avant de changer l'heure :

Code :
  1. if(document.querySelector('.id').textContent == 'home') {
  2.  document.querySelector('.hourshand').style.transform = `rotate(${hour}deg)`
  3. }
 

console.log(document.querySelector('.id').textContent) me retourne bien le texte correspondant à la page, mais la comparaison à l'air toujours vraie et me renvoie la même erreur qu'au début.

 

J'ai sûrement raté un truc évident pour que ça merde à chaque fois [:sniperlk].


Message édité par Manisque le 20-11-2022 à 19:46:09

---------------
Si tu bois froid juste après le potage chaud, ça va faire sauter l'émail de tes dents - Monorailcat iz ohverin
Reply

Marsh Posté le 20-11-2022 à 19:45:55   

Reply

Marsh Posté le 20-11-2022 à 20:12:13    

https://developer.mozilla.org/en-US [...] rySelector
 
Si querySelector ne trouve pas d'élément il renvoie null, utilise l'opérateur stricte avec 3 signes pour les comparaisons de type (=== ou !==).


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 20-11-2022 à 20:18:09    

Ça fonctionne, merci :jap:.


---------------
Si tu bois froid juste après le potage chaud, ça va faire sauter l'émail de tes dents - Monorailcat iz ohverin
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed