- Just remove the line
i++ (6th line from end), your code will run fine. i is not defined so it is creating the error
ReferenceError: i is not defined
Code snippet after removing the line i++
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>movieCard</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<style>
img.mal {
-webkit-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
img.mal {
pointer-events: none;
}
.movie_card.mal{
padding: 0 !important;
width: 22rem;
margin:14px;
border-radius: 10px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 15px 0 rgba(0, 0, 0, 0.19);
}
.movie_card.mal img.mal{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height: 33rem;
}
.movie_info.mal{
color: #5e5c5c;
}
.movie_info.mal i.mal{
font-size: 20px;
}
.card-title.mal{
width: 80%;
height: 4rem;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script>
axios.get(`https://api.jikan.moe/v3/user/humzaa-senpai/animelist/watching`, { headers: { Accept: "application/json" } }).then(list => {
list.data.anime.forEach(item => {
var date = new Date(item.start_date)
var year = date.getFullYear()
console.log(item)
document.getElementById('watch_list')
.insertAdjacentHTML(
'beforeend',
`
<a href="${item.url}">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="card movie_card">
<img src="${item.image_url}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.title}</h5>
<span class="movie_info">${year}</span> </div>
</div>
</div>
</div>
</a>
`
);
});
})
</script>
<div id="watch_list"></div>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
