Document.write // document.getElementById()

Résolu/Fermé
nicodak Messages postés 50 Date d'inscription vendredi 21 août 2020 Statut Membre Dernière intervention 2 juin 2021 - 30 déc. 2020 à 13:34
jordane45 Messages postés 38195 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mai 2024 - 30 déc. 2020 à 21:01
Bonjour,

Dans un éditeur en ligne, j'ai un message d'avertissement lorsque je teste un petit script comme celui-là:
var x = "4", y = "3";
total = x + y;

document.write(total);

document.write can be a form of eval
ok en me renseignant un peu, document.write comporte certains risques liés à la sécurité (sur un site en production) et donc il est recommandé d'utiliser document.getElementById() à la place.

Mais je ne parviens pas à intégrer cette syntaxe dans mon script de calcul de 2 valeurs.
Comment réécrire le code avec document.getElementById()

var x = 4;
var y = 3;

var total = x + y;
document.getElementById(total)

Ceci ne fonctionne pas, je suppose que je suis à côté de la plaque...

Merci

Configuration: Windows / Chrome 87.0.4280.88

1 réponse

jordane45 Messages postés 38195 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mai 2024 4 675
30 déc. 2020 à 14:59
Bonjour,

document.getElementById .. sert, comme son "nom" le laisse entendre.. que ça sert à récupérer un élément via son id ....
ça ne remplace en aucun cas le write ....

Par contre,
Tu mets un ID à un élément html de ta page ( une div par exemple )
Tu récupères cet élément via son ID en javascript
Et tu écris le contenu voulu dans cet élément
Voir exemples donnés ici : https://www.w3schools.com/js/js_htmldom_html.asp


0
nicodak Messages postés 50 Date d'inscription vendredi 21 août 2020 Statut Membre Dernière intervention 2 juin 2021 1
Modifié le 30 déc. 2020 à 16:50
Merci pour votre réponse, je comprends, d'ailleurs j'avais visité la page w3schools que vous proposez.
Donc maintenant, est-ce que document.getElementById peut afficher le résultat d'une opération stockée dans une variable ?
var x = 4;
var y = 3;

var total = x + y;
document.getElementById("res").innerHTML = "total";

<p id="res"></p>

Car ce code écrit total entre les balises <p> mais la variable total qui est égal à x = y soit 7
0
jordane45 Messages postés 38195 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mai 2024 4 675 > nicodak Messages postés 50 Date d'inscription vendredi 21 août 2020 Statut Membre Dernière intervention 2 juin 2021
30 déc. 2020 à 16:55
Quand tu mets des quotes ... c'est que tu écris du texte ....
Donc là : "total" .. c'est le TEXTE total qui s'écrit
Si tu veux utiliser une variable c'est sans les quotes
document.getElementById("res").innerHTML = total;
0
nicodak Messages postés 50 Date d'inscription vendredi 21 août 2020 Statut Membre Dernière intervention 2 juin 2021 1 > jordane45 Messages postés 38195 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mai 2024
30 déc. 2020 à 17:09
Raaaah !! Je le savais ça en plus !
Merci beaucoup pour votrre réponse et votre réactivité.
0
nicodak Messages postés 50 Date d'inscription vendredi 21 août 2020 Statut Membre Dernière intervention 2 juin 2021 1 > jordane45 Messages postés 38195 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mai 2024
30 déc. 2020 à 20:55
Je reviens à la charge pour la mise en forme du résultat.
Actuellement le résultat est affiché comme ceci
331445128544

Sans que l'on puisse reconnaitre les différentes valeurs. Alors j'ai essayé ça mais le résultat n'est pas meilleur
var a="33", b="14", c="45", d="1", e="28", f="5", g="44";

var loto = a + b + c + d + e + f + g;
document.getElementById("resultat").innerHTML = loto.split('').join(' ');

3 3 1 4 4 5 1 2 8 5 4 4

Comment obtenir 33 14 45 1 28 5 44 ?

Merci beaucoup !
0
jordane45 Messages postés 38195 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mai 2024 4 675 > nicodak Messages postés 50 Date d'inscription vendredi 21 août 2020 Statut Membre Dernière intervention 2 juin 2021
30 déc. 2020 à 21:01
var loto = a + " " + b + " " + c +  " "  +d + " " + e + " " + f +  " " + g;
document.getElementById("resultat").innerHTML = loto ;

ou encore
var loto = [a,b,c,d,e,f,g];
document.getElementById("resultat").innerHTML = loto.join(' ');


Par contre.... en général, sur ce forum, une discussion concerne UN souci.
Réouvrir une discussion classée comme RESOLUE pour y poser une nouvelle question n'est pas la bonne pratique.
Je t'invite à remettre cette discussion en résolue.. puis, si tu as de nouveaux besoins, d'ouvrir une nouvelle discussion propre à chacun d'eux.
Bonne soirée.
0