我可以使用一些幫助。我有一個按鈕，點擊后，它會使用爸爸笑話 API 和 Axios 生成一個笑話。但是，當我再次單擊按鈕時，我無法弄清楚如何擺脫舊笑話。這是我的代碼。謝謝
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>
uj5u.com熱心網友回復：
你應該做的是使用dom元素繼承的函式來洗掉de子節點：
<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>
uj5u.com熱心網友回復：
您需要將傳入的笑話存盤在 ana 陣列中以檢查重復項。試試這個
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 :(';
});
}轉載請註明出處，本文鏈接：https://www.uj5u.com/net/426139.html
標籤：javascript dom axios
上一篇：附加元素被HTML洗掉
下一篇：嘗試通過json檔案檢索唯一資料