2 votes

comment sauvegarder le champ d'entrée au lieu du stockage local sur la table ?

J'ai un tableau dans lequel la valeur du stockage local est sauvegardée et affichée dans l'écran d'accueil. th . Je veux écrire une fonction qui supprimera le texte de la mémoire locale et ouvrira le champ de saisie au clic. J'ai essayé quelque chose comme ceci :

<html>
<body>
<table style="float: right ; padding-left: 10px;" id="table">
<tr>
<th id="hello" style="padding-left:24px; text-align: center;" class="button" id="0"><input id="inside" name="inside" type="text" ></th>
</table>
<button onclick="again();">again</button>
<script>
   function again() {
   document.getElementById("hello").innerHTML=input;}
</script>
</body>
</html>

mais ça ne marche pas. Quelqu'un peut-il m'expliquer quelle est l'erreur ? Merci beaucoup !

1voto

Dave Pritlove Points 482

Votre fonction again() est de définir le innerHTML de l'élément th à la valeur d'une variable appelée input (qui n'existe pas).

Vous devez extraire la valeur du champ de saisie et l'écrire (chaîne de caractères) comme innerHTML de l'en-tête. Essayez ceci :

function again(){
  const tableHeaderElement = document.getElementById("hello");
  const userEnteredData = tableHeaderElement.getElementsByTagName('input')[0].value;
  tableHeaderElement.innerHTML = userEnteredData;
}

la deuxième déclaration récupère un HTMLCollection de balises d'entrée à l'intérieur de l'en-tête. Votre collection HTML n'aura qu'un seul membre mais devra être référencée par index, comme un tableau, donc [0]. Évidemment, .value extrait la propriété value de cet élément, qui est le texte saisi par votre utilisateur.

En fonction de l'utilisation, l'ajout de données saisies par l'utilisateur dans un élément html peut poser des problèmes de sécurité car, s'ils ont saisi des balises script et un javascript valide, ils pourraient être en mesure de faire des choses que vous ne voulez pas qu'ils fassent. Il est habituel de filtrer les données saisies par l'utilisateur, de les "assainir", de supprimer le code actif, ou, plus facile mais bientôt déprécié, d'échapper les données avant de les écrire dans un élément html.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X