Using Axios to post a joke on click ( 1 at a time )-CodePudding

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 >
    <button>Click if you want a cringe joke</button>
  </div>

CodePudding user response：

What you should do is use the functions inherited by dom elements to delete de child node:

<body>
    <div >
    <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>

CodePudding user response：

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 :(';

  });

  }