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
– Sebastian Simon, Commented Oct 8, 2017 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
– StuiterSlurf, Commented Oct 8, 2017 at 10:19
If you mean by outputting, save to hard disk then yes, but you need more then drawing something on page. Like stackoverflow.com/questions/13405129/… where the user can download a file. — Mouser
– Mouser, Commented Oct 8, 2017 at 10:19

Gautam · Accepted Answer · 2017-10-08 11:07:24Z

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>

lumio · Accepted Answer · 2017-10-08 10:38:47Z

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 );
} );

Shashank Shekhar · Accepted Answer · 2017-10-08 10:34:25Z

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 8, 2017 at 10:34

answered Oct 8, 2017 at 10:25

Shashank Shekhar

1747 bronze badges

Comments

Walle Cyril · Accepted Answer · 2017-10-08 10:21:50Z

-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 8, 2017 at 10:21

Walle Cyril

3,2674 gold badges28 silver badges60 bronze badges

1 Comment

Mouser Over a year ago

Please provide the necessary coding and/or documentation with your answer.

Collectives™ on Stack Overflow

How to output a variable value in HTML or JavaScript?

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related