Photoshop Question posted in
The official user guide can be found here.

HTML/Javascript Problem Displaying Local Storage Values – Photoshop

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.

Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 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.
    Login or Signup to reply.
  3. 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>
    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search