Javascript Basics error

MDN Learn
#1

I am working thru the tutorial titled JavaScript Basics, found here:

I have worked through most of it, and here is my current code:

`
/const myHeading = document.querySelector(‘h1’);
myHeading.textContent = ‘Hello world!’;/

let myImage = document.querySelector(‘img’);

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

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

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

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

myButton.onclick = function() {
setUserName();
}
`
It doesn’t work. It does nothing. The error I get in the browser’s console is “Uncaught DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document.
at file:///home/beginner-html-site-styled-gh-pages/scripts/main.js:24:1”

However, in Atom, the error is a bit more specific: “Uncaught TypeError: Failed to execute ‘setItem’ on ‘Storage’: 2 arguments required, but only 1 present.
at main.js:24”

So it seems to expect 2 arguments for if(!localStorage.setItem('name'))

Your version works in my browser just fine. Why doesn’t mine?

#2

I did notice that it should be .getItem instead of setItem. I did make that change in my code to if(!localStorage.getItem('name')), but there was still no change in outcome. It still doesn’t seem to work, and has the same error message.

#3

@mbrasseau OK, so let’s have a look at this.

For a start, there are some forward slash characters causing an error, in this bit:

/const myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';/

I removed those. Not sure if this is just a problem caused by the way you wrote the code into discourse; thought I’d mention it just in case.

Secondly, you have myHeading declaraed as a constant on line 1, but again on line 16. This causes an error because you are not allowed to redeclare constants (or variables created wth let, for that matter). I’ve removed the const version, and put the let version up at line 1 so it is declared before it is used.

Third, and I think this is the one you were on about — in line 24 you had setItem instead of getItem:

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

I’ve updated that to

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

With those things done, the code seems to now work fine. My updated version of your code looks like this:

let myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';

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

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


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

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

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

Thank you for your help.

The first two lines are actually commented out in my IDE. /* like this */
I’m not sure how my asterisks were lost.

I corrected the setItem to getItem. It now works fine on Firefox, but not on Chrome. I have not tried it on any other browsers.

But I did get it to work. Yay!

#5

Thank you for your help.

You are welcome!

The first two lines are actually commented out in my IDE. /* like this */
I’m not sure how my asterisks were lost.

Ah, probably discourse doing something strange with the formatting. It is usually better to put your code examples in an online editor like codepen and share them like that.

I corrected the setItem to getItem . It now works fine on Firefox, but not on Chrome. I have not tried it on any other browsers.

Hrm, interesting! My version works fine on Chrome. Do you get any error messages? Web Storage should work on any browser all the way back to IE8: https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem#Browser_compatibility

#6

There error message is:

Uncaught DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document.

I did notice that it is also showing that it blocked something. That message is:

This page was prevented from setting cookies.

I set it to allow… no change. I tried adding file:// and file:/// on the white list, still no change.

#7

So when you’ve run the example, you are running it from your local file system (e.g. with a file:// url). Have you tried running it through a web server, e.g. a local server, or
GitHub pages perhaps?

#8

When I run the exercise that I completed, I double-click on the html file on my computer. Chrome is my default browser, so it automatically opens in Chrome. And does not work.

When I run the exercise that I completed, and instead right-click and open the file on my computer with Firefox, it works as it should.

The MDN live example, on Github, works just fine in Chrome.

Also, to note, I’m on a Linux/Ubuntu 18.04 machine, actually using Chromium, Version 78.0.3904.108 Not sure if that has anything to do with it.

I have attempted, a few times, to set up a local server, but all of the tutorials assume the user has some advanced knowledge that I do not have. So while I’ve followed the instructions to do it a few times, I don’t really understand what I’m doing, and don’t know how to utilize what I’ve done… or a few steps or explanations have been skipped from the various tutorials on it.

#9

Have you tried the Python SimpleHTTPServer? This is the one I always use, and it’s explained here:

Let me know if you need any more help.

#10

Aha!!! That did the trick!

Thank you for this article, as it gave me a clue as to why my previous attempts at setting up a local server failed. The setup defaults to port 8000. But my hotspot is already running a proxy on that port. The article’s instructions to set it up on port 7800 worked, and now I have a local server setup. Yay!

And now the exercise works perfectly on my machine, in my Chrome browser.

Thank you, Thank you, Thank you!!!

#11

Great stuff, glad we got this working for you :wink:

#12

Code JavaScript du tutoriel Basic donne erreur avec Brackets.
Le code posant problème est
let myHeading = document.querySelector(‘h1’). Brackets renvoie

Expected an identifier and instead saw ‘let’. let myHeading = document.querySelector(‘h1’);

1

Stopping. (50% scanned). let myHeading = document.querySelector(‘h1’);

ESLint (1)

1

X ERROR: Parsing error: Unexpected token myHeading let myHeading = document.querySelector(‘h1’);