function bindCheckbox() {
let inputCheckbox = document.querySelectorAll('input[type=checkbox]');
let favoriteList = document.getElementById('favorites');
inputCheckbox.forEach(function(element, index) {
inputCheckbox[index].addEventListener('change', function() {
let fav = localStorage.getItem('favoList') || [];
console.log(fav);
let joke = this;
if(joke.checked && joke.parentNode.parentNode.id === 'list-of-jokes') {
addFavorite(joke.id, joke.parentNode.innerText, fav);
}
});
}
}
function addFavorite(idNum, jokeText, fav) {
let norrisJoke = [{
id: idNum,
joke: jokeText
}];
console.log(fav);
let favorites = fav;
console.log(idNum, jokeText);
console.log(norrisJoke);
favorites.push(norrisJoke);
localStorage.setItem('favoList', JSON.stringify(norrisJoke));
}
the value should be pushed into fav element, but that is kind of inside a closure. So the value should be pushed inside an innerfunction and stored inside an element inside the outer function. The localstorage outputs [object object] and no value of norrisjoke.
https://codepen.io/chichichi/pen/JMqvyP?editors=1111
let fav = localStorage.getItem(‘favoList’) || []; inside bindCheckbox() function
Oke I get it now. How could I solve this correctly.
To add a little to Randell’s excellent answer…
Just as a general debugging concept, whenever you see “[blank] is not a function of …”, that is javascript telling you that whatever prototype method you are trying to use is not a prototype of that variable type. In this case, push is a method defined for arrays, not objects. You would get the error if you tried to apply it to a string. Whenever I get that error, the first thing I do is check to see I have the right method and then I check the typeof of that variable. Usually I’ve made a mistake and the variable isn’t the type I thought it was.
1 Like
Oke that is a good one, will use that often.
Thanks for your feedback.
It outputs the json values when it has been clicked on.
Ye, but I think you should not use codepen for this, cuz it would not store in localstorage…
When I click on a checkbox it will pass an id and text, but looking at the localStorage I see [object object]. I know the typeof storage is object and should be an array. The question from my side is, how should I turn an object into an array?
function addFavorite(jokeId, jokeText) {
let storage = localStorage.getItem('favoList') || [];
let norrisJoke = {
id: jokeId,
joke: jokeText
};
console.log(norrisJoke);
storage.push(norrisJoke);
console.log(typeof storage);
localStorage.setItem('favoLis', norrisJoke);
}
The data in localstorage must be in a string format so when you are calling setItem you need to stringify it.
localStorage.setItem('thedata', JSON.stringify(your_object));
And when you retrieve the data from local storage you have to parse it back to an object.
localStorage.getItem(JSON.parse('thedata')) ;
typeof favorites is still an object… —> let fav = JSON.parse(localStorage.getItem(‘favoList’))|| [];
When I checkmark the first input checkbox no error is showing up, but after clicking the second, third, fourth and so on.
Error message: Uncaught TypeError: favorites.push is not a function
I would recommend you to copy all the codes from codepen and save it locally.Open this with google chrome browser.
Found the answer I picked up the wrong variable (norrisJoke), but that should be variable favorites in this context.
function addFavorite(jokeId, jokeText, fav) {
let norrisJoke = {
id: jokeId,
joke: jokeText
};
let favorites = fav;
console.log(fav);
console.log(JSON.parse(norrisJoke.id));
console.log(norrisJoke.joke);
favorites.push(norrisJoke);
// console.log(typeof result);
localStorage.setItem('favoList', JSON.stringify(favorites));
console.log(favorites.length);
}
The goal of this project is to improve my vanilla js I get your point and then I need to do something so it would not add a new list of jokes infinitely. Maybe disabling them or something like that
Cool, codes looks much cleaner now
Would you like to join my front end slack community (810+ members). Your expertise would be absolutely useful for many of them.
Ok great man, you teach me a lot new things about JavaScript. Very grateful for that