어려운 클래스명 지양할 것. 일관성 있는 클래스명 만들 것.
진짜 한참 찾음..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>띵동코딩-Fetch 연습</title>
<style>
.wrap {
width: 300px;
margin: auto;
}
.wrap > h1 {
text-align: center;
}
.wrap > button {
display: block;
margin: auto;
margin-bottom: 30px;
}
</style>
<script>
function movieReviews() {
let url = "http://spartacodingclub.shop/post";
let movPic = document.querySelector("#moviesPic");
let movTitle = document.querySelector("#moviesTitle");
let movComment = document.querySelector("#moviesComment");
fetch(url)
.then((res) => res.json())
.then((data) => {
console.log(data);
console.log(data["articles"][0]["image"]);
let row = data["articles"][0];
// movPic.setAttribute("src", `${data["articles"][0]["image"]}`);
$("#moviesPic").attr("src", row["image"]);
$("#movieTitle").text(row["title"]);
$("#movieComment").text(row["comment"]);
// movTitle.textContent = data["articles"][0]["title"];
// $("#moviesComment").text($(data["articles"][0]["comment"])); //
});
}
</script>
</head>
<body>
<div class="wrap">
<h1>영화 버킷 리스트</h1>
<button onclick="movieReviews()">다음</button>
<div>
<img
id="moviesPic"
width="300"
src="https://ddingdong.spartacodingclub.kr/images/common/logo-tb.svg"
/>
<h2 id="movieTitle"></h2>
<div id="movieComment"></div>
</div>
</div>
</body>
</html>