커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
토글이 제대로 작동이 안 됩니다.
[왕초보] 웹개발 종합반
5주차
북마크
정*서
댓글
3
・
추천
0
・
조회수
12
조회수
12
답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.


script type 을 module로 하면 onclick이 작동이 안 된다고 하셔서 그대로 따라 했는데, [영화 기록하기] 버튼을 눌러도 작동을 안 합니다.

어느 부분이 잘못된건가요?







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

<title>스파르타플렉스</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

</head>

<style>

@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');



.form-floating>input {

background-color: transparent;

color: black;

}


.form-floating>label {

color: white;

}


.input-group>label {

background-color: transparent;

color: white;

}


* {

font-family: 'Gowun Dodum', sans-serif;

}


body {

background-color: black

}


.mycards {


width: 1100px;

margin: 10px auto 10px auto;

}


.mypostingbox {

width: 550px;

border: 1px solid white;

border-radius: 5px;

margin: 10px auto 10px auto;

padding: 20px;

box-shadow: 0px 0px 3px blue;

}


.main {

color: white;

background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');

background-position: center;

background-size: cover;

}

</style>

<script type="module">

// Firebase SDK 라이브러리 가져오기

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";

import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";



// Firebase 구성 정보 설정

// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {

apiKey: "AIzaSyDD9I4W9wOs9opb4bF9ghbR_9PKAYeZRSg",

authDomain: "sparta-98dbf.firebaseapp.com",

projectId: "sparta-98dbf",

storageBucket: "sparta-98dbf.firebasestorage.app",

messagingSenderId: "166890114365",

appId: "1:166890114365:web:29647db3713eb068b28954",

measurementId: "G-4WQ0WDSBV0"

};



// Firebase 인스턴스 초기화

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);


$('#postingbtn').click(async function () {

let image = $('#image').val();

let title = $('#title').val();

let star = $('#star').val();

let comment = $('#comment').val();


let doc = {

'image': image,

'title': title,

'star': star,

'comment': comment

};

await addDoc(collection(db, "movies"), doc);

alert('저장 완료!');

window.location.reload();

})




$(document).ready(function () {

let url = "http://spartacodingclub.shop/sparta_api/weather/seoul"

fetch(url).then(res => res.json()).then(data => {

let mise = data['temp']

$('#ondo').text(mise)

})

})


$('#savebtn').click(async function () {

$('#mypostingbox').toggle();

})


function makeCard() {

let image = $('#image').val();

let title = $('#title').val();

let star = $('#star').val();

let comment = $('#comment').val();

let temp_html = `

<div class="col">

<div class="card h-100">

<img src="${image}"

class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">"${title}"</h5>

<p>"${star}"</p>

<p class="comment">"${comment}"</p>

</div>

</div>

</div>`;

$('#card').append(temp_html);

}

</script>


<body>

<header class="p-3 text-bg-dark">

<div class="container">

<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">

<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">

<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">

<use xlink:href="#bootstrap"></use>

</svg>

</a>


<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">

<li><a href="#" class="nav-link px-2 text-danger">spartaflix</a></li>

<li><a href="#" class="nav-link px-2 text-white">홈</a></li>

<li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>

<li><a href="#" class="nav-link px-2 text-white">영화</a></li>

<li><a href="#" class="nav-link px-2 text-white">내가 찜한 콘텐츠</a></li>

<li><a href="#" class="nav-link px-2 text-white">현재 서울 기온 : <span id="ondo"></span> 도</a></li>

</ul>


<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">

<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."

aria-label="Search">

</form>


<div class="text-end">

<button type="button" class="btn btn-outline-light me-2">Login</button>

<button type="button" class="btn btn-danger">Sign-up</button>

</div>

</div>

</div>

</header>

<div class="main">

<div class="p-5 mb-4 bg-body-tertiary rounded-3">

<div class="container-fluid py-5">

<h1 class="display-5 fw-bold">킹덤</h1>

<p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직

세자뿐이다.</p>

<div class="btn">

<button id="savebtn" type="button" class="btn btn-outline-light">영화 기록하기</button>

<button type="button" class="btn btn-outline-light">상세정보</button>

</div>

</div>

</div>

</div>

<div class="mypostingbox" id="postingbox">

<div class="form-floating mb-3">

<input type="email" class="form-control" id="image" placeholder="name@example.com">

<label for="floatingInput">영화 이미지 주소</label>

</div>

<div class="form-floating mb-3">

<input type="email" class="form-control" id="title" placeholder="name@example.com">

<label for="floatingInput">영화 제목</label>

</div>

<div class="input-group mb-3">

<label class="input-group-text" for="inputGroupSelect01">별점</label>

<select class="form-select" id="star">

<option selected>별점 선택</option>

<option value="1">⭐️</option>

<option value="2">⭐️⭐️</option>

<option value="3">⭐️⭐️⭐️</option>

<option value="4">⭐️⭐️⭐️⭐️</option>

<option value="5">⭐️⭐️⭐️⭐️⭐️</option>

</select>

</div>

<div class="form-floating mb-3">

<input type="email" class="form-control" id="comment" placeholder="name@example.com">

<label for="floatingInput">추천 이유</label>

</div>

<button id="postingbtn" type="button" class="btn btn-danger">기록하기</button>

</div>

<div class="mycards">

<div id="card" class="row row-cols-1 row-cols-md-4 g-4">

<div class="col">

<div class="card h-100">

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">영화 제목</h5>

<p>⭐️⭐️⭐️⭐️⭐️</p>

<p class="comment">comment</p>

</div>

</div>

</div>

<div class="col">

<div class="card h-100">

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">영화 제목</h5>

<p>⭐️⭐️⭐️⭐️⭐️</p>

<p class="comment">comment</p>

</div>

</div>

</div>

<div class="col">

<div class="card h-100">

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">영화 제목</h5>

<p>⭐️⭐️⭐️⭐️⭐️</p>

<p class="comment">comment</p>

</div>

</div>

</div>

<div class="col">

<div class="card h-100">

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">영화 제목</h5>

<p>⭐️⭐️⭐️⭐️⭐️</p>

<p class="comment">comment</p>

</div>

</div>

</div>

</div>

</div>


</body>


</html>


취소
 공유
취소
댓글 0
댓글 알림
나의얼굴