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?
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.
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();
}
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: Storage: setItem() method - Web APIs | MDN
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?
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.
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.
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’);