嗨，我想制作一个笑话应用程序，所以我想从网站上提取笑话并在我的 div 中显示它，这是我的代码，它给了我未定义的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dad Jokes</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="stylesheet.css">
<script src="code.jquery.com_jquery-3.7.0.js"></script>
</head>
<body>
<div class="container">
<h3>Dont Laugh Challenge</h3>
<div id="jokepad" class="jokepad">
//joke will be here
</div>
<button id="jokebtn" class="btn">Next Joke from here</button>
</div>
<script src="script.js"></script>
</body>
</html>
这是我的 html，我正在使用按钮和 div 来获取笑话并更改它
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600&family=Roboto:wght@400;900&display=swap');
*{
box-sizing: border-box;
}
body{
font-family:'Roboto', sans-serif;
margin: 0;
display:flex;
flex-direction: column;
align-items: center;
justify-content:center;
height: 100vh;
overflow: hidden;
background-color: lightsalmon;
}
.container{
background-color: pink;
max-width: 100%;
width:800px;
border-radius: 10px;
box-shadow: 0px 10px 10px violet,0px 6px 6px deeppink;
padding: 20px 40px;
text-align: center;
}
h3{
opacity: 0.5;
margin: 0;
letter-spacing: 3px;
}
.jokepad{
margin:20px;
letter-spacing: 2px;
font-size: 24px;
}
.btn{
cursor: pointer;
padding: 10px 20px;
border: 0;
border-radius: 5px;
background-color: purple;
color:goldenrod;
}
.btn:focus{
outline: 0;
}
.btn:active{
transform:scale(0.95)
}
我的CSS很好
这是 DOM
var jokeEl = document.getElementById("jokepad");
var jokebtn = document.getElementById("jokebtn");
generateJoke();
jokebtn.addEventListener("click",generateJoke);
function generateJoke(){
fetch("https://icanhazdadjoke.com",{headers:{
Accept:"application/json"
}})
.then(function(res){ res.json()
})
.then(function(data){
console.log(data);
jokeEl.innerHTML = data;
})
使用此代码时，我在 div 中未定义，如果我添加了 .jokes，它就不起作用
最后一部分只有两处变化
var jokeEl = document.getElementById("jokepad");
var jokebtn = document.getElementById("jokebtn");
generateJoke();
jokebtn.addEventListener("click",generateJoke);
function generateJoke(){
fetch("https://icanhazdadjoke.com",{
headers:{
Accept:"application/json"
}})
.then(function(res){
return res.json();
})
.then(function(data){
console.log(data);
jokeEl.innerHTML = data.joke;
})
}
1.不需要解析为
json()2.由于您没有使用箭头函数，您需要使用 retun 语句将数据传递给下一个 .then 函数
3.data 将是一个由笑话组成的对象，因此使用 data.joke 示例输出：
{id: 'apO7pW08pzd', joke: `It's been months since I bought the book "how to scam people online". It still hasn't turned up.`, status: 200}