숙제에 관해서 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

숙제에 관해서

[왕초보] 웹개발 종합반 v0

0주차

문*조

・

추천

・

조회수

답변 완료

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

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

동적 삭제를 해보고 싶어서 구글링으로 해봤는데 잘 안되네요 어디가 문제인지 알려주실수 있을까요?

작성한 코드 및 에러 메세지

전체 코드

<!DOCTYPE html>

<head>

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

<style>

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

* {

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

}

.mytitle {

height: 250px;

color: white;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');

background-position: center;

background-size: cover;

}

.mytitle>button {

width: 150px;

height: 50px;

background-color: transparent;

color: white;

border: 1px solid white;

border-radius: 5px;

margin-top: 20px;

}

.mycards {

width: 1200px;

margin: 30px auto 0px auto;

}

.mypostingbox {

width: 500px;

margin: 30px auto 0px auto;

padding: 20px;

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

border-radius: 5px;

}

.mybtn {

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

}

.mybtn>button {

margin-right: 5px;

}

</style>

// 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";

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

const firebaseConfig = {

apiKey: "AIzaSyCGGyViOy6g2FV0knIo973HwDxWkcoZw2g",

authDomain: "sparta-723ba.firebaseapp.com",

projectId: "sparta-723ba",

storageBucket: "sparta-723ba.appspot.com",

messagingSenderId: "313134893342",

appId: "1:313134893342:web:860f98bcbfcf334d0ea10f",

measurementId: "G-KMERNC3VTL"

};

// Firebase 인스턴스 초기화

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

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

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

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

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

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

let doc = {

'image': image,

'title': title,

'content': content,

'date': date

};

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

alert('저장 완료!');

window.location.reload();

})

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

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

})

let url = "http://spartacodingclub.shop/sparta_api/seoulair";

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

let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']

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

})

let docs = await getDocs(collection(db, "albums"));

docs.forEach((doc) => {

let row = doc.data();

let image = row['image'];

let title = row['title'];

let content = row['content'];

let date = row['date'];

let temp_html = `

<img src="${image}"

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

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

<p class="card-text">${content}</p>

</div>

</div>

</div>`;

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

let removedObj = mycards.removeChild(card);

const card = document.querySelector('#card');

let mycards = card.parentElement;

mycards.removeChild(card);

});

</script>

</head>

<body>

</p>

</div>

</div>

</div>

</div>

</div>

</div>

<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

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

</div>

</div>

<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

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

</div>

</div>

<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

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

</div>

</div>

<img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

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

</div>

</div>

</body>

</html>

숙제용으로 추가한 코드

let removedObj = mycards.removeChild(card);

const card = document.querySelector('#card');

let mycards = card.parentElement;

mycards.removeChild(card);

에러 메시지

Uncaught ReferenceError: Cannot access 'mycards' before initialization

at index.html:143:30

at index.esm2017.js:20411:52

at index.esm2017.js:14944:33

at Bi.inorderTraversal (index.esm2017.js:2512:87)

at Bi.inorderTraversal (index.esm2017.js:2512:66)

at Pi.inorderTraversal (index.esm2017.js:2419:14)

at Nd.forEach (index.esm2017.js:14944:9)

at np.forEach (index.esm2017.js:20411:35)

at index.html:119:14

The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.
To fix this issue, make sure the label's for attribute references the correct id of a form field.
AFFECTED RESOURCES
4 resources
Violating nodeViolating nodeViolating nodeViolating node

Learn more: The label elements

오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!

댓글 알림