Dev Faq
0
votes

Problème HTML / JavaScript Affichage des valeurs de stockage locales

Mon objectif est que l'utilisateur puisse entrer dans un bloc de texte et qu'il est renvoyé dans un format convivial, comme un poste de blog. Ils entreront dans leur nom et tout ce qu'ils veulent dire, alors il sera stocké localement et affiché. J'ai essayé de stocker les données comme stockage local, mais je continue à obtenir une erreur avec "Ce fichier n'existe pas". L'extrait de code ci-dessous est juste pour une affichage de base une fois que l'utilisateur clique sur un bouton, mais même cela ne fonctionne pas.

Veuillez noter que tous les besoins doivent pouvoir fonctionner de manière indépendante, car je m'approuve de base JavaScript / HTML de base Pour une concurrence de codage où le logiciel fort> strong> autorisé est le bloc-notes de codage et de photoshop pour la manipulation d'image. P> 

<!DOCTYPE html>
<html>
    <script>
        function passvalues() {
            var firstName = document.getElementById("txt".value);
            localStorage.setItem("textvalue",firstName);
        }
        
        document.getElementById("result").innerHTML = localStorage.getItem("textvalue");
    </script>
    <body>
        <form>
            <input type = "text" id ="txt" placeholder='place text here'/>
            <button type="submit" value='click me!' onClick="passvalues();"> Click Me</button>
        </form>
    </body>
    <p id="result"></p>
</html>

1 commentaires

votre

est en dehors du corps

4 Réponses :

2
votes

Vous avez les bonnes idées. Le plus gros problème est ici: 

 document.getElementById("txt".value);
  • Assurez-vous que votre

    code> est à l'intérieur du code> li>

  • Assurez-vous que votre

2 commentaires

J'ai déplacé mon

à l'intérieur du corps et toujours une erreur. J'ai également supprimé le ".value" du document.getElementyID ("txt") et déplacé le script vers la fin. Maintenant, j'ai une bordure "null" aléatoire ci-dessous, et je reçois toujours le "Ce fichier n'existe pas" d'erreur. Attaché est un lien de capture d'écran sur ce que je vois: IBB.CO/52W0Q6P

Considérez le fait que vous obtenez [objet htmlinputelement] , au lieu de la valeur de l'élément. Peut-être que vous devez avoir .value quelque part

0
votes

voir: https://jsfiddle.net/9ycjsuo/ pour un exemple de travail.

Certaines choses que j'ai remarquées:

  • Vous avez mis du contenu en dehors de l'étiquette du corps - qui n'est pas valide.
  • La valeur ne venait pas du champ de texte à cause d'une parentale de clôture mal alignée.
  • Votre formulaire utilise un bouton Soumettre et rien n'empêche l'action par défaut. Lorsque vous soumettez un formulaire, cela vous conduira à une nouvelle page sauf si vous PRENVENDDEFAULT sur l'événement Soumettre. J'ai changé le bouton sur type = "bouton" pour empêcher une soumission.
  • Vous devez mettre à jour la valeur du texte de résultat après avoir enregistré la valeur en stockage local.
1 commentaires

Avez-vous déjà entendu parler de lien pour la pourriture ? En d'autres termes, toutes les informations importantes devraient être incluses dans la réponse. Y compris le code de démonstration.

0
votes

Ceci fonctionnera:

p> 

<!DOCTYPE html>
<html>

<body>
    <form onsubmit="event.preventDefault(); passvalues();">
        <input autofocus type = "text" id ="txt" placeholder='place text here'/>
        <button type="submit" value='click me!' onClick="passvalues();"> Click Me</button>
    </form>
    <p id="result"></p>
    <script>
        var result = document.getElementById("result");
        result.innerHTML = localStorage.getItem("textvalue");

        function passvalues(e) {
            var firstName = document.getElementById("txt").value;
            localStorage.setItem("textvalue", firstName);
            document.getElementById("result").innerHTML = firstName;
        }
    </script>
</body>
</html>

2 commentaires

Je cours dans votre code dans la section des extraits et cela me donne une erreur. Est-ce juste parce qu'il est exécuté dans le logiciel d'extraction de débordement de pile ou?

Oui. Stackoverflow ne prend pas en charge LocalStorage.

1
votes

Vous avez 3 numéros:
1. GetElementyID ("TXT" .Value) devrait être getplementyid ("txt"). Valeur
2. Prenez la balise

dans
3. Placez l'ensemble