Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Diana Fitter
Diana Fitter
2,651 Points

Session storage only works with browser back button on my site. I want it to work with internal navigation buttons.

Here's my script: '''js <script> function save() { var answerValue = document.getElementById('answerFinal').value; localStorage.setItem('text', answerValue);} </script> ''' and the html for my nav: '''html <input type="button" id="button-back" onclick="location.href='index.html'; javascript:save()"/'''>

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Your HTML seems to be missing.

Also, remember to enclose your included code between lines with three accents (```). The first of these should have the language extension added (```html or ```js)

Diana Fitter
Diana Fitter
2,651 Points

Thanks, Steve. Here's the html code '''html input type="button" id="button-back" onclick="location.href='index.html'; javascript:save()"/ '''

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Those blockquotes need accents (`) not apostrophes ('). I gave you some examples you can cut-n-paste.

It still looks like some code is missing. The code shown seems to be for the "back" (actually more of a "home") button, which seems to be working.

Perhaps you might post the code that's NOT working.

Diana Fitter
Diana Fitter
2,651 Points

Thanks for your reply. Heres' the entire code for my html file which includes the script. The back button does work, but it doesn't retain the data the user has input when you return to the page :

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<title>Input tutorial</title>
<script src="js/agility-scripts.js"></script>
<script src="js/storage.js"></script>

<script>
var id = sessionStorage.getItem("text");
alert(text);
</script>



<link rel="stylesheet" type="text/css" href="css/agility.css">

<link rel="stylesheet" type="text/css" href="css/Animate-CSS.css">


</head>


<body>

<div id="mainHead">
    <img src="img/main-head.svg" alt=""/>
</div>

<div id="instructions" class="animated fadeIn ">
    <img src="img/titleDeck.svg" alt=""/>
</div>





<main>

    <div id="opExHead" class="animated flipInX ">
        <img src="img/opexcellence.svg" alt=""/><br>
    </div>




<!--strat align panel-->

<div id="stratAlignPanel">

     <div id="stratAlignHead">
        <img src="img/opExstratAlignmentHead.svg" alt=""/><br>
    </div>

    <div id="stratAlignPanelScrollA">
        <div class="stratAlignText">
            <img src="img/opExStratAlignTextA.svg" alt=""/><br>
        </div>
    </div>

    <div id="stratAlignPanelScrollB">
        <div class="stratAlignText">
            <img src="img/opExStratAlignTextB.svg" alt=""/><br>
        </div>
    </div>


    <div class="stratAlignPanelScrollAtOP">

    </div>


    <div class="stratAlignPanelScrollBtOP">

    </div>




        <input  type="text" id="value1" name="value1" value=""/>

        <input type="text" id="value4" name="value4" value=""/>


</div>       

<!--end strat align panel-->



<!--execution panel-->


 <div id="executionPanel">   

     <div id="executionHead">
        <img src="img/opExExecutionHead.svg" alt=""/><br>
    </div>

    <div id="executionPanelScrollA">
        <div class="stratAlignText">
            <img src="img/opExExecutionTextA.svg" alt=""/><br>
        </div>
    </div>

    <div id="executionPanelScrollB">
        <div class="stratAlignText">
            <img src="img/opExExecutionTextB.svg" alt=""/><br>
        </div>
    </div>


     <div class="stratAlignPanelScrollAtOP">

    </div>


    <div class="stratAlignPanelScrollBtOP"></div>

    <input type="text" id="value2" name="value2" value=""/>

    <input type="text" id="value5" name="value5" value=""/>






</div> 

 <!--end execution panel-->



<!--perf mgmnt panel-->

<div id="perfmgntPanel">

    <div id="perfmgmntHead">
        <img src="img/opExPerfMgmtHead.svg" alt=""/><br>
    </div>

    <div id="perfMgmtPanelScrollA">
        <div class="stratAlignText">
            <img src="img/opExPerfMgmtTextA.svg" alt=""/><br>
        </div>
    </div>

     <div id="perfMgmtPanelScrollB">
        <div class="stratAlignText">
            <img src="img/opExPerfMgmtTextB.svg" alt=""/><br>
        </div>
    </div>





        <div class="stratAlignPanelScrollAtOP"></div>


        <div class="stratAlignPanelScrollBtOP"></div>



        <input type="text" id="value3" name="value3" value="" placeholder=""/>

        <input type="text" id="value6" name="value6" value=""/>





</div>

<!--end perf mgmt panel-->

<script>    
function save() {

    var answerValue = document.getElementById('answerFinal').value;
    localStorage.setItem('text', answerValue);



}

</script>       

        <input type="text" name="ansFinal" id="answerFinal" value=""/>

        <input type="button" id="button3" name="Sumbit" onclick="javascript:addNumbersFinal(); " >









<img id="buttonCategoryRight" src="img/Agility-button.svg" alt=""/>

<div id="button-forward" onclick="javascript:save(); window.history.back(1); "><a href="agility.html" target="_self"><img src="img/Button-forward.svg" alt="button"></a></div>

</main>


</body>
</html>´´´
Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

It looks like you have JavaScript mixed in with your HTML without SCRIPT tags. And things seem to be a bit different from the first sample. But anyway, assuming the SCRIPT tags just got left out while copying, here are a few other observations:

  • the HTML code has only one button
  • the button calls a function named addNumbersFinal, and there's no JavaScript code for it
  • the save function is never called
  • the JavaScript code displays an alert with the variable text, but no such variable is ever declared
  • the code sets a variable id from sessionStorage, but the save routine uses localStorage
Diana Fitter
Diana Fitter
2,651 Points

Thanks, I'll take a look.