How to output a variable value in HTML or JavaScript?

Question

How could I output values of some variables in HTML or JavaScript?

I have this html file on my cellphone:

 text = "";
    function Show(x)
       {
       text = text + " " + x;
       document.getElementById("Line").innerHTML = text;
       }

    
    .GoToPanelButtons {
        color: maroon;
        background:pink;
        font-size:72px;
    }

    <div>Click randomly on any of these buttons:</div>
    <button class="GoToPanelButtons" onclick="Show('cat')">cat</button>
    <button class="GoToPanelButtons" onclick="Show('dog')">dog</button>
    <button class="GoToPanelButtons" onclick="Show('rat')">rat</button>
    <br>
    <br>
    <div>Here is what you've clicked on:</div>
    <br>
    <div id="Line">---</div>

and I want to be able to return to what I have typed here - that is the contents of variable x in the code - after I turn my cellphone off. However, if I turn it off and then turn it on again the variable is blank and whatever I have typed is gone.

I've looked through similar questions here on StackOverflow, but it seems that "outputting" there means simply displaying.

Is outputting that I am talking about possible in HTML or JavaScript at all?

Do you want the output to _persist_? Then use `localStorage`. — Sebastian Simon, Oct 08 '17 at 10:15
You can't detect with a browser to if a phone is turned of. It caches it by itself. There is no way except writing it in an app. — StuiterSlurf, Oct 08 '17 at 10:19
If you mean by outputting, save to hard disk then yes, but you need more then drawing something on page. Like https://stackoverflow.com/questions/13405129/javascript-create-and-save-file where the user can download a file. — Mouser, Oct 08 '17 at 10:19

score 1 · Answer 1 · answered Oct 08 '17 at 10:38

You could easily use localStorage.setItem and localStorage.getItem

A simple example would be something like this (working example on codepen):

// Check for localStorage support
if ( !window.localStorage ) {
  alert( 'No support for localStorage :(' );
}
// If supported, load localStorage item
else {
  const id = getClicked();
  id && document.querySelector( '#' + id ).classList.add( 'clicked' );
}

function saveClicked( id ) {
  localStorage.setItem( 'buttonId', id );
}

function getClicked() {
  return localStorage.getItem( 'buttonId' );
}

document.addEventListener( 'click', ( e ) => {
  if ( e.target.tagName !== 'BUTTON' ) {
    return;
  }

  // Remove current clicked class
  const current = document.querySelector( '.clicked' )
  if ( current ) {
    current.classList.remove( 'clicked' );
  }

  // Add clicked class on button and save it in localStorage.
  e.target.classList.add( 'clicked' );
  saveClicked( e.target.id );
} );

score 1 · Accepted Answer · answered Oct 08 '17 at 11:07

Try this code it will work perfectly fine.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>Click randomly on any of these buttons:</div>
<button class="GoToPanelButtons" onclick="Show('cat')">cat</button>
<button class="GoToPanelButtons" onclick="Show('dog')">dog</button>
<button class="GoToPanelButtons" onclick="Show('rat')">rat</button>
<button class="GoToPanelButtons" onclick="Clear()">Clear</button>
<br>
<br>
<div>Here is what you've clicked on:</div>
<br>
<div id="Line">---</div>

<script>
    function Show(x) {
        if(localStorage.text){
            localStorage.text = localStorage.text +" "+ x;
        }else{
            localStorage.text = x;
        }
        document.getElementById("Line").innerHTML = localStorage.text;
    }
    function Clear(){
        localStorage.clear();
        document.getElementById("Line").innerHTML = '';
    }
    Show('');
</script>
</body>
</html>

Shashank Shekhar · Answer 3 · 2017-10-08T10:34:25.570

0

Variable loose their value after window is closed. You can use cookies to store the data in browser

  document.cookie = "text=" + text;

You will need to write a function to get that cookie.

Read this if you want more info on cookies

edited Oct 08 '17 at 10:34

answered Oct 08 '17 at 10:25

Shashank Shekhar

182
7

score -1 · Answer 4 · answered Oct 08 '17 at 10:21

-1

Local storage can be used to store that information on the client, the device that is viewing the html.

Ajax + server side html generation can be used to store that information on server side, with the benefit of potentially making it available to others

answered Oct 08 '17 at 10:21

Walle Cyril

3,087
4
23
55

Please provide the necessary coding and/or documentation with your answer. – Mouser Oct 08 '17 at 10:22

How to output a variable value in HTML or JavaScript?

4 Answers4