使用 Axios post 点击一个笑话（一次 1 个）

Question

我需要一些帮助。我有一个按钮，点击后，它会使用爸爸的笑话 API 和 Axios 生成一个笑话。但是，当我再次单击该按钮时，我不知道如何摆脱这个老笑话。这是我的代码。谢谢

让按钮 = document.querySelector('button') button.addEventListener("点击", 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>

Answer 1

您需要将传入的笑话存储在数组中以检查重复项。试试这个

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

  });

  }

Answer 2

你应该做的是使用dom元素继承的函数删除子节点：

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

使用 Axios post 点击一个笑话（一次 1 个）

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

javascript

dom

axios