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 Nurbek Ismailov
Nurbek Ismailov
2,068 Points

how can I run JS code in different pages. I am new to JS.

this is my code, it basically, after you sign up, it storeS your Name and car type in local storage and display on top right corner "Hi Name, Car Logo" It is working in 1 page, but i wanted this to show up in other pages. I put this code in other html pages <script src="profile.js"></script>, and put this code below and it is not working. What else should i do?

HTML Code

<div id="userNameDisplay">
     <div id="icons"> </div>
     <div id="icons2"> </div>
     <div id="icons3"> </div>
     <p id='username'> </p>
</div>

JS Code

// Define function to create user model class
function User(name, email) {
  this.name = name;
  this.email = email;
  this.tesla = tesla.checked;
  this.leaf = leaf.checked;
  this.bmw = bmw.checked;
};

function getUserData(event) {
  // Avoid page reloading on form submission
  event.preventDefault();
  // Get values from the form
  var fullName = event.target.fullName.value;
  var email = event.target.fullName.email;
  // Create new instance of user model
  var newUser = new User(fullName, email);
  // Set data to local storage
  localStorage.setItem('userProfile', JSON.stringify(newUser));
}

var personInfo = document.getElementById('personinfo')
personInfo.addEventListener('submit', getUserData);

// This function will store your name and your selectino of car types in localStorage and display on right top corner of page
function getUserName () {
  if (localStorage.userProfile) {
    console.log (localStorage.userProfile)
    var getUserNameData = JSON.parse(localStorage.getItem('userProfile'));
    console.log (getUserNameData);
    var userName1stLetter = getUserNameData.name.charAt(0).toUpperCase();
    var userNamerRestLetter = getUserNameData.name.slice(1);
    document.getElementById('username').innerHTML = 'Hi ' + userName1stLetter + userNamerRestLetter + "!";
    if (getUserNameData.tesla === true) {
      document.getElementById('icons').innerHTML = '<a href="https://www.tesla.com/" target = "_blank"><img src="images/tesla.png"/></a>'
    }
    if (getUserNameData.leaf === true) {
      document.getElementById('icons2').innerHTML = '<a href="http://www.nissanusa.com/leaf" target = "_blank"><img src="images/nissan.jpg"/></a>'
    }
    if (getUserNameData.bmw === true) {
      document.getElementById('icons3').innerHTML = '<a href="https://www.bmwusa.com/i3‎" target = "_blank"><img src="images/bmw.jpg"/></a>'
    }
  }
};
getUserName ();

CODEPEN http://codepen.io/coden/pen/akPPdY

1 Answer

gregsmith5
gregsmith5
32,615 Points

Keep in mind that each time you load a webpage or move to a different URL, all of your data disappears. Any variables you had like the data you get from a form are released from memory, never to be seen again. So, loading the same script on a new page isn't going to help you. What you want to do is persist the data that a user enters. The way this usually happens is your webpage will send the data to a server which then processes the data and loads it in a database. Then, any time your app needs things like the user name or car model, it will request it from the server. Depending on the server platform you're using, the app will either receive a webpage with the requested data rendered into it, or it could just get a some data in a format like JSON, which your app would render into the webpage. There are no simple steps to do this, you'll have to start learning to code on the backend if you want to implement this stuff on your own, or at least get some working server side code to play with. Since you already know some JavaScript, I suggest taking on some of the Node courses here on Treehouse (but make sure to watch the HTTP and REST courses first).

However! - There might be a way to simulate sending data to the server using only your browser. If you write some data to local storage, you can retrieve it later. This won't work if you send the user to another domain, but if you link to another CodePen site (or any site that's on the same server), you should be fine. The trick to using localStorage is to remember that it only stores strings. So...

var userData = {
    userName: "Geralt",
    userEmail:  "swordm4str2008@dopemail.com"
}

userData = JSON.stringify(userData); //Turn the object into a string
localStorage.setItem('userData', userData); //Store the string in localStorage as `userData`

To retrieve the data...

var userData = {};
if(localStorage.getItem('userData') {
   userData = localStorage.getItem('userData');
   userData = JSON.parse(userData); //Change from a string back into a JS object
}

There are hacks to get localStorage data from another domain, and if you want a more authentic database experience, it would be trivially easy to write some wrapper functions for that.

Nurbek Ismailov
Nurbek Ismailov
2,068 Points

thanks Greg