How to make variables in html? + other questoins

Hi! thanks for @SteGriff for helping me do that last question. Now i need to now how to make variables. I need to know because i need to use a Textbox to set your name on Local=world. Also, how do i use the same variable in different files? And last question, how do i get the text in the textbox to set the value of the variable? thanks!
:grin:

Hi again.

First a warning; I think what you’re trying to create at the end of this is a “multiplayer” kind of experience, and for that you’re eventually going to need a back-end and a database. That means that for your final product, you would be better off remixing from https://glitch.new/node rather than from the static website that you have now.

In that version, you would write Fastify “routes” that let you send data (like usernames, scores etc.) into the database so that they can be pulled out and seen by all.

However, for now, let me answer your question simply :slight_smile:

If you want to persist data that is typed into forms on the page, and then see it on other pages, you can use localStorage. This data will be local to the user’s PC so no one else will see it, and they lose the data if they clear cookies + storage.

See Localstorage on MDN.

I’m gonna drop some code examples now that are totally off the top of my head and are untested…

Essentially, you have something like this to save to localStorage:

<input class="js-name">
<button onclick="save()">Save</button>

<script>
  function save() {
    // Get the value from js-name box
    var username = document.getElementsByClassName('js-name')[0].value;
    localStorage.setItem('username', username);
  }
</script>

…and something like this to load it, perhaps on another page:

<body onload="load()">
  <h1 class="js-welcome"></h1>
  <! -- All the rest of your body code, etc. -- >

  <script>
    function load() {
      // Called on page load. Get the localStorage stuff:
      const username = localStorage.getItem('username');
      const welcomeElement = document.getElementsByClassName('js-welcome')[0];
      welcomeElement.innerText = "Welcome, " + username;
    }
  </script>
  ...

If you get something like the code above working, I think it will give you that magical sense of acheivement that you made something interactive happen across two separate web pages, which is always good! :blush:

But I have to let you know that you are heading into the (exciting) world of building full-stack apps. Which is not simple, but it is satisfying.

As you go on, you will encounter easier/better ways of doing the stuff above. For example, when you use Vue, you can “bind” elements to values so you don’t have to manually update things like the header, it just does it anytime the value changes.

I have a couple of Vue apps with localstorage, but all of these are static sites as well, they are not full-stack. Nevertheless if you want to look at Vue, they can help:

https://glitch.com/~shopsum
https://glitch.com/~japapad

Quck edit: My personal Vue starter, ste-vue, also has a dead-simple demo of Vue so you can see what’s up and get started right away: https://glitch.com/~ste-vue

The most important thing is to have fun!! :grin::man_technologist:

2 Likes