Clyons1 commented 8 years ago

Hello,

I am currently beginning the Odin Project and have progressed to the JavaScript basics portion. Following this guide (https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics) After spending some time attempting to get the code to prompt you for a name / give the user an individualized welcome message with no success, I am here.

I believe that I followed the instructions to the letter but have been unable to get either the prompt function, welcome message, or change user button to work. I even tried to copy and past the code but the issue still persists.

I will attempt to copy and paste the code below and see if you folks could help spot the error! From: index.html: <!DOCTYPE html>

My test page

A delightful trip into the Green Mountains with Dorian Yablin!

A photograph of Dorian and I a top Jay Peak Mountain during a week long ski trip!

Here Dorian and I were cheering on top of Jay Peak Mountain because of the beautiful weather and fantastic ski conditions we were experiencing!

A week long get away with a condo on the mountain!
One of our many trips together that leaves me filled with joy and happiness!

Jay Peak Resort!

Here is the main.js: var myImage = document.querySelector('img');

myImage.onclick = function() { var mySrc = myImage.getAttribute('src'); if(mySrc === 'images/jay_peak_trip.jpg') { myImage.setAttribute ('src','images/vienna_trip.jpg'); } else { myImage.setAttribute ('src','images/jay_peak_trip.jpg'); } }

var myButton = document.querySelector('button'); var myHeading = document.querySelector('h1');

function setUserName() { var myName = prompt('Please enter your name.'); localStorage.setItem('name', myName); myHeading.textContent = 'Welcome!, ' + myName; }

if(!localStorage.getItem('name')) { setUserName(); } else { var storedName = localStorage.getItem('name'); myHeading.textContent = 'Welcome Back! ' + storedName; }

myButton.onclick = function() { setUserName(); }

Sorry if this is just a wall of syntax, but I simply don't know how else to go about finding this error. Any and all tips / advice is appreciated! Thank you for your time!

chrisdavidmills commented 8 years ago

Hello again! So I've tried downloading the working code as it appears on the github repo, and then pasting your code inside the JavaScript file and reloading. I get no error messages and it seems to work fine, so it doesn't look like it's an issue with your JS.

To debug this, try looking in the developer tools — select Tools > Web Developer > Web Console in your menu in Firefox (or the equivalent in whatever browser you are using) to open the developer tools JavaScript console. This will spit out error messages if something is going wrong. What does it say there about your page?

If you are having trouble finding this, let me know what browser you are using and I'll get you some better instructions.

Have a go at this first, as it's good learning practice to have a go at debugging your own errors. If this does not prove fruitful, I might get you to email me your code base so I can take a look.

Happy hunting.

henrythedj commented 8 years ago

I'm having a similar problem (but only in IE). I can run the page and I get the name popup in Chrome, but when I use IE it won't work. I opened the developer tools and it doesn't send any errors when I click the button. Thoughts?

(using IE 11)

chrisdavidmills commented 8 years ago

I just tried our finished test version in IE11, and it worked ok for me:

https://mdn.github.io/beginner-html-site-scripted/

The source code is here:

https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js

Have a look and see if you've got anything different on your version.

danaepoc commented 5 years ago

I had exactly the same problem. I checked in the web console, and it appears that the localstorage access is denied. So the problem was that Google Crome was blocking cookies from a third part: if you uncheck this option it should work - at least it worked for me.

chrisdavidmills commented 5 years ago

@danaepoc where did you see this option? I can't seem to reproduce this in Chrome — it works for me by default in both Chrome and Chome Canary. Is this an option you turned on, or was it like that by default for you?

danaepoc commented 5 years ago

@chrisdavidmills I found it in the Chrome settings. If you go there and type "cookies", then select "Content settings" (the second option form the bottom) and then "Cookies", there are three options that can be checked. I unchecked the "Block third-party cookies" one, and then it worked. I found this procedure here: [https://www.chromium.org/for-testers/bug-reporting-guidelines/uncaught-securityerror-failed-to-read-the-localstorage-property-from-window-access-is-denied-for-this-document] I had the "Block third-party cookies" checked by default, and the web console was returning this error: Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

chrisdavidmills commented 5 years ago

This is really weird. I don't see why localstorage is blocked if third party cookies are blocked. The localstorage is not third party...I'll have to investigate this some more.

danaepoc commented 5 years ago

Great, thanks for researching it.

CruzArian commented 5 years ago

Hello all, I hope people is still checking the comments here.

I'm also following the instructions from the JavaScript basics in the MDN web DOCS, specifically here https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics

Well, everything is just find and the explanations are great, but I have a little doubt. In the event when the page asks for the users name and then stores it, it seems that in my page it just does not stores it because every time I refresh the page, the prompt will come and ask for the name again and again.

My code is exactly the same as the instructions:

var myButton = document.querySelector('button'); var myHeading = document.querySelector('h1');

function setUserName(){ var myName = prompt('PLease enter your name.'); localStorage.setItem('name', myName); myHeading.innerHTML = 'Mozilla is cool ' + myName; }

if(!localStorage.getItem(name)){ setUserName() }else{ var storedName = localStorage.getItem('name'); myHeading.innerHTML = 'Mozilla is cool, ' + storedName; }

myButton.onclick = function(){ setUserName(); }

I wonder if this because I'm loading the page from my hard rive and not from a web server.

Thank you for reading my comment.

chrisdavidmills commented 5 years ago

Hi there @CruzArian!

Sorry for being slow to respond to your comment — work has been really busy ;-)

So, your code is not the same as my example; you missed one tiny thing. In the following line:

if(!localStorage.getItem(name)){

You are missing quotes round "name"; it should be this:

if(!localStorage.getItem('name')) {

When you try to search for a data item stored in localStorage, you query the item by its name, which should be a string. So we are asking local storage if it contains the data item with the name 'name'. In your code you are searching for a variable called name, which doesn't exist in your code, so it silently fails.

gopikark commented 5 years ago

I have been doing the course for web development and I reached here: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics

I tired opening the website in IE microsoft edge and in the console I got an error as ' SCRIPT16389: Unspecified error.' But when i opened in chrome the welcome message was displayed without any error.. So what could have been the problem when I tried in IE? And won't the website ever get opened in IE again??

chrisdavidmills commented 5 years ago

Hi there @gopikark !

It depends what Microsoft browser you are trying to use. The code I wrote for this tutorial should work in IE versions 8 and later, and all versions of Edge.

IE is a horrible old legacy browser and I wouldn't be surprised if it broke. Edge on the other hand is more modern and has been pretty good from my experience.

Let's have a quick look and see if there is anything wrong in your code. Have you got it available online anywhere, so I can see it? Or do you want to post it in this thread?

gopikark commented 5 years ago

@chrisdavidmills sir, the following is the code of main.js:

var myButton = document.querySelector('button'); var myHeading = document.querySelector('h1');

code of index.html:

<!DOCTYPE html>

My test page

THIS IS FUN!!

This is a sample web site

Here we used

List
Heading
Paragrahs
Links

The following is an example of link

Click here to go to the link of the image

chrisdavidmills commented 5 years ago

Hrm, this is strange. I've tested your code and it looks fine.

I've also tested the example using a remote testing service, on Edge 13 and IE10, and it works fine on both.

Can you test our version (https://mdn.github.io/beginner-html-site-scripted/) on your IE and see if it works? Also, do you know what IE version you've got?

gopikark commented 5 years ago

@chrisdavidmills sir, your version works well in IE and Edge for me. My IE version is IE 11 and that of Edge is EdgeHTML 17, Edge 42.

chrisdavidmills commented 5 years ago

OK, cool. So, I noticed that your code had two instances of let in it, whereas my code is still using all vars for variable declaration.

let is supported in IE11 and Edge, so it shouldn't cause a problem, but... try changing the lets to vars in your code and see if it now works in IE/Edge.

Also try my updated code:

// Image switcher code

let myImage = document.querySelector('img');

myImage.onclick = function() {
  let mySrc = myImage.getAttribute('src');
  if(mySrc === 'images/firefox-icon.png') {
    myImage.setAttribute ('src','images/firefox2.png');
  } else {
    myImage.setAttribute ('src','images/firefox-icon.png');
  }
}

// Personalized welcome message code

let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');

function setUserName() {
  let myName = prompt('Please enter your name.');
  localStorage.setItem('name', myName);
  myHeading.innerHTML = 'Mozilla is cool, ' + myName;
}

if(!localStorage.getItem('name')) {
  setUserName();
} else {
  let storedName = localStorage.getItem('name');
  myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
}

myButton.onclick = function() {
  setUserName();
}

gopikark commented 5 years ago

@chrisdavidmills No, it isn't working either way

chrisdavidmills commented 5 years ago

hrm. I'm not really sure why this isn't working then. let is supposed to be supported in IE11/Edge. I wonder if there is something about the spacing of your code that causes the error?

I'll have more of a think about it later on. In the meantime, I wouldn't worry too much about IE/Edge support at this point in your learning. It is good that you are already thinking about cross browser support.

aleedhillon commented 5 years ago

Here is a little bit improved code, it will ask your name again if you did not set it the first time instead of showing null.

let myButton = document.querySelector('button');
let myHeading = document.querySelector('h2');
let myName = localStorage.getItem('name');

function setName() {
    let name = prompt('What is your name?');
    localStorage.setItem('name', name);
    myHeading.textContent = 'Hello, ' + name;
}

if (!myName || myName === 'null' ) {
    setName();
} else {
    myHeading.textContent = 'Hello, ' + myName;
}

myButton.onclick = function(){
    setName();
}

chrisdavidmills commented 5 years ago

@aliadhillon hi there! Thanks for your suggestion. I think it is a good idea to introduce readers to simple error handling code like this, so I've updated the online example and added a brief new section to cover it.

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics#A_user_name_of_null

Thanks!

zeljkoprsa commented 4 years ago

Strange, after fixing all the typos I got it working but the change is only applied when I reload the page.

avivmu commented 4 years ago

@chrisdavidmills let's close this

mdn / beginner-html-site-scripted

Issues with Adding a personalized Welcome Message #1

A delightful trip into the Green Mountains with Dorian Yablin!

THIS IS FUN!!