Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
888 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  getElementById

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

getElementById

n°2402859
spoque
Posté le 06-12-2021 à 19:58:53  profilanswer
 

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

mood
Publicité
Posté le 06-12-2021 à 19:58:53  profilanswer
 

n°2402883
rufo
Pas me confondre avec Lycos!
Posté le 06-12-2021 à 22:37:17  profilanswer
 

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
n°2402954
spoque
Posté le 07-12-2021 à 12:24:38  profilanswer
 

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

n°2403150
MaybeEijOr​Not
but someone at least
Posté le 08-12-2021 à 20:01:57  profilanswer
 

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.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2432790
Manisque
Posté le 20-11-2022 à 17:48:52  profilanswer
 

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
n°2432792
rufo
Pas me confondre avec Lycos!
Posté le 20-11-2022 à 17:58:13  profilanswer
 

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.


---------------
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
n°2432796
MaybeEijOr​Not
but someone at least
Posté le 20-11-2022 à 18:22:51  profilanswer
 

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.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2432799
Manisque
Posté le 20-11-2022 à 18:47:56  profilanswer
 

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
n°2432800
MaybeEijOr​Not
but someone at least
Posté le 20-11-2022 à 19:09:38  profilanswer
 

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.
n°2432805
Manisque
Posté le 20-11-2022 à 19:45:55  profilanswer
 

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
mood
Publicité
Posté le 20-11-2022 à 19:45:55  profilanswer
 

n°2432808
MaybeEijOr​Not
but someone at least
Posté le 20-11-2022 à 20:12:13  profilanswer
 

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.
n°2432811
Manisque
Posté le 20-11-2022 à 20:18:09  profilanswer
 

Ç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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  getElementById

 

Sujets relatifs
document.getElementById ne veut pas fonctionner sous IEgetElementById & FindControl
méthode getElementByIdgetelementbyid et span ?
Problème avec document.getElementByIdProbleme avec getElementById
[RESOLU]document.getElementById() = null mais pourquoi ??html: Probleme entre getElementById et internet explorer
[Résolu] Problème getElementById IE8 et safari[résolu] problème avec getElementById et onload ...
Plus de sujets relatifs à : getElementById


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR