0

My goal is for the user to be able to enter a block of text and have it returned in a user-friendly format, like a blog post. They'll enter in their name and whatever they want to say, then it will be stored locally and displayed. I've tried storing the data as local storage, but I keep getting an error with "this file does not exist". The code snippet below is just for a basic displaying once the user clicks a button, but even that doesn't work.

Please note this all needs to be able to function independently, as I'm teaching myself basic Javascript/HTML for a coding competition where the only software allowed is notepad for coding and Photoshop for image manipulation.

<!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>

Hi everyone, I'm sorry I didn't get to this sooner! In any case, thank you to all of those who answered, it's highly appreciated.

Improve this question
1
  • 1
    your <p id="result"></p> is outside the body Commented Jun 4, 2020 at 2:06

4 Answers 4

Reset to default
2

You got the right ideas. The biggest problem is in here:

 document.getElementById("txt".value);

I'll let you figure out what's wrong there.

Some other things to fix:

  • ensure your <p> is inside the <body>
  • ensure your <script> is inside the <body> and after the HTML elements it operates on, so basically make it the last thing in the <body>

Another tip is that you may or may not want to add return false; at the end of your onClick javascript. This will prevent it from submitting the form and hence refreshing the page. In this particular case with the design you have, you may actually want to leave it as-is and have the refresh happen so your read from local storage will execute. But, it's good to be aware of what return false does -- as there are a lot of situations in which it isn't desirable for a form to submit after executing some javascript like that.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I moved my <p> inside of the body, and still an error. I also removed the ".value" from the document.getElementById("txt"), and moved the script to the end. Now I have a random "null" border below, and I still get the "this file does not exist" error. Attached is a screenshot link to what I'm seeing: ibb.co/52W0q6p
Consider the fact that you are getting [object HTMLInputElement], instead of the value of the element. Maybe you need to have .value somewhere
1

You have 3 issues :
1. getElementById("txt".value) should be getElementById("txt").value
2. take the <p> tag within </body>
3. place the whole <script>...</script> just before </body> 

<!DOCTYPE html>
<html>
<body>
    <form>
        <input 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>
    function passvalues() {
        var firstName = document.getElementById("txt").value;
        localStorage.setItem("textvalue",firstName);
    }

    document.getElementById("result").innerHTML = localStorage.getItem("textvalue");
    </script> 
</body>
</html>
Improve this answer

Comments

0

See: https://jsfiddle.net/9ycqjsuo/ for a working example.

Some things I noticed:

  • You have put some content outside the body tag -- that isn't valid.
  • The value was not coming from the text field because of a misaligned closing paren.
  • Your form is using a submit button and nothing prevents the default action. When you submit a form it will take you to a new page unless you preventDefault on the submit event. I have changed the button to type="button" to prevent a submit.
  • You should update the value of the result text AFTER you have stored the value into local storage.
Improve this answer

1 Comment

Ever hear of link rot? In other words, all important information should be included in the answer. Including demo code.
0

This will work:

<!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>

Improve this answer

2 Comments

I run in your code in the snippet section and it gives me an error. Is this just because it is run in the snippet software of stack overflow or?
Yes. Stackoverflow doesn't support localstorage.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.