getElementById

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : getElementById

spoque

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 :

var boxA = document.getElementById('value_item_7');
var charlimit = 60; // char limit per line
boxA.onkeyup = function() {
var lines = boxA.value.split('\n');
for (var i = 0; i < lines.length; i++) {
if (lines[i].length <= charlimit) continue;
var j = 0; space = charlimit;
while (j++ <= charlimit) {
if (lines[i].charAt(j) === ' ') space = j;
}
lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || "" );
lines[i] = lines[i].substring(0, space);
}
boxA.value = lines.slice(0, 10).join('\n');
};

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 :

var inputs = document.getElementsByTagName("textarea" );
for (var z = 0; z < inputs.length; z++) {
alert(inputs[z].id);
}
var boxA = document.getElementById(inputs);
var charlimit = 60; // char limit per line
boxA.onkeyup = function() {
var lines = boxA.value.split('\n');
for (var i = 0; i < lines.length; i++) {
if (lines[i].length <= charlimit) continue;
var j = 0; space = charlimit;
while (j++ <= charlimit) {
if (lines[i].charAt(j) === ' ') space = j;
}
lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || "" );
lines[i] = lines[i].substring(0, space);
}
boxA.value = lines.slice(0, 10).join('\n');
};

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

Cédric

Publicité

rufo

Pas me confondre avec Lycos!

var boxA = document.getElementById(inputs);
inputs est un tableau : ça peut pas marcher

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

spoque

rufo a écrit :

var boxA = document.getElementById(inputs);
inputs est un tableau : ça peut pas marcher

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 :

var ctrl = Runner.getControl(pageid, 'item'); <--------- comme j'utilise un framework c’était cette ligne qui me manquait!
for (var z = 0; z < ctrl.getDispElem().length; z++) {
alert(ctrl.getDispElem()[z].id);
var boxA = document.getElementById(ctrl.getDispElem()[z].id);
var charlimit = 60; // char limit per line
boxA.onkeyup = function() {
var lines = boxA.value.split('\n');
for (var i = 0; i < lines.length; i++) {
if (lines[i].length <= charlimit) continue;
var j = 0; space = charlimit;
while (j++ <= charlimit) {
if (lines[i].charAt(j) === ' ') space = j;
}
lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || "" );
lines[i] = lines[i].substring(0, space);
}
boxA.value = lines.slice(0, 10).join('\n');
};
}

MaybeEijOrNot

but someone at least

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.

Manisque

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 .

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 .

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

Code :

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

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

Code :

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

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

rufo

Pas me confondre avec Lycos!

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

MaybeEijOrNot

but someone at least

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

Message cité 1 fois

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

Manisque

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 :

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

MaybeEijOrNot

but someone at least

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 :

if(mavariable !== 'undefined')

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

Manisque

Alors, j'ai adapté le code :

Code :

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

Ç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 :

<div class="id">home</div>

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

Code :

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

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

Publicité

MaybeEijOrNot

but someone at least

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.

Manisque

Ç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

FORUM HardWare.fr

Programmation

Javascript/Node.js

getElementById

Sujets relatifs
document.getElementById ne veut pas fonctionner sous IE	getElementById & FindControl
méthode getElementById	getelementbyid et span ?
Problème avec document.getElementById	Probleme 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

Page générée en 0.085 secondes