I could use some help. I have a button and on click, it generates a joke using dad jokes API and Axios. However, I can't figure out how to get rid of the old joke when I click on the button again. Here is my code. Thanks
let button = document.querySelector('button') button.addEventListener("click", getJoke)
function getJoke() {
const p = axios
.get('https://icanhazdadjoke.com/', { headers: { "Accept": "text/plain" },
})
.then((response) => {
const joke = response.data
const jokeContainer = document.querySelector('.joke');
const blockquoteEl = document.createElement('blockquote');
blockquoteEl.append(joke);
jokeContainer.appendChild(blockquoteEl);
})
.catch((error) => {
const jokeContainer = document.querySelector('.joke');
jokeContainer.innerText = 'Joke not found :(';
});
}
<div class="joke">
<button>Click if you want a cringe joke</button>
</div>
you need to store the incoming jokes in ana array to check the duplicates. try this
function getJoke() {
const p = axios
.get('https://icanhazdadjoke.com/', { headers: { "Accept": "text/plain" },
})
.then((response) => {
const joke = response.data
const jokesArr = [];
// stores joke history
jokesArr.push(joke);
// checkes the repeated joke in jokes history
const jokeCheck = (joke) => {
const currentItemCount = jokesArr.filter(val => val=== joke).length;
if(currentItemCount > 0) {
p();
}
return joke;
}
const currentJoke = jokeCheck(joke);
const jokeContainer = document.querySelector('.joke');
const blockquoteEl = document.createElement('blockquote');
blockquoteEl.append(currentJoke);
jokeContainer.appendChild(blockquoteEl);
})
.catch((error) => {
const jokeContainer = document.querySelector('.joke');
jokeContainer.innerText = 'Joke not found :(';
});
}What you should do is use the functions inherited by dom elements to delete de child node:
<body>
<div class="joke">
<button>Click if you want a cringe joke</button>
</div>
<script>
let button = document.querySelector('button');
button.addEventListener("click", getJoke);
function getJoke(){
const p = axios.get('https://icanhazdadjoke.com/', { headers: { "Accept": "text/plain" }
}).then((response) => {
const joke = response.data
const jokeContainer = document.querySelector('.joke');
jokeContainer.removeChild(jokeContainer.childNodes[2]);
const blockquoteEl = document.createElement('blockquote');
blockquoteEl.append(joke);
jokeContainer.appendChild(blockquoteEl);
}).catch((error) => {
const jokeContainer = document.querySelector('.joke');
jokeContainer.innerText = 'Joke not found :(';
});
}
</script>
</body>