CODEWITHSUNDEEP
javascripthtml
brilliant
brilliant

Reputation: 2853

How to output a variable value in HTML or JavaScript?

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?

Upvotes: 0

Views: 623

Answers (4)

Gautam
Gautam

Reputation: 825

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>

Upvotes: 1

lumio
lumio

Reputation: 7575

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

Upvotes: 1

Shashank Shekhar
Shashank Shekhar

Reputation: 176

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

Upvotes: 0

Walle Cyril
Walle Cyril

Reputation: 3247

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

Upvotes: -1

Related Questions