how to fetch data and read response

hi i want to make a joke app so i want to pull jokes from a site and show it in my div this is my code it gives me undefined

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

this is my html and i am using the button and div to get the joke and change it

@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)
}

my css is good

this is the 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;
   })

when using this code i get undefined in the div and if i added .jokes it isnt working

Solution

only two changes in last part

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.There is no need to parse as json(), the result is not JSON but is instead the result of taking JSON as input and parsing it to produce a JavaScript object. reference: https://developer.mozilla.org/en-US/docs/Web/API/Response/json

2.As you are not using arrow function you need to use retun statement to pass the data to next .then function

3.data will be an object consists of joke so use data.joke example output:

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