The list of jokes that has been loaded should be jumped to favorite list when the checkbox is being checked. How could I do that.
function bindCheckbox() {
let inputCheckbox = document.querySelectorAll('input[type=checkbox]');
let elems = document.getElementById('list-of-jokes').childNodes;
let favoriteList = document.getElementById('favorites');
if(elems.length > 0) {
inputCheckbox.forEach(function(element, index) {
inputCheckbox[index].addEventListener('change', function() {
if(this.checked && this.parentNode.parentNode.id === 'list-of-jokes') {
console.log();
this.parentNode.appendChild(favoriteList);
} else {
console.log('not checked');
}
});
});
}
}
Can we see your HTML or a pen? I don’t want spend a lot of time trying to recreate your html in order to test this.
I found the answer already, but could not find out how to delete this question.
It would be better to post your solution so others can see it.
<div class="inner-body">
<button id="getData">GET Jokes</button>
<div class='inner-block'>
<h2>Chuck Norris Jokes</h2>
<ul class='unordered-list' id="list-of-jokes">
</ul>
</div>
<div class='inner-block'>
<h2>Favorites</h2>
<ul class='unordered-list' id="favorites">
</ul>
</div>
</div>
function bindCheckbox() {
let inputCheckbox = document.querySelectorAll('input[type=checkbox]');
let elems = document.getElementById('list-of-jokes').childNodes;
let favoriteList = document.getElementById('favorites');
if(elems.length > 0) {
inputCheckbox.forEach(function(element, index) {
inputCheckbox[index].addEventListener('change', function() {
let fav = localStorage.getItem('favoList') || [];
let joke = this;
if(joke.checked && joke.parentNode.parentNode.id === 'list-of-jokes') {
joke.checked = false;
favoriteList.appendChild(joke.parentNode);
}
if(joke.checked && joke.parentNode.parentNode.id === 'favorites') {
}
});
});
}
}