<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
function checkResult() {
let people = [
{ 'name': '서영', 'height': 165 },
{ 'name': '현아', 'height': 170 },
{ 'name': '영환', 'height': 175 },
{ 'name': '서연', 'height': 162 },
{ 'name': '지용', 'height': 190 },
{ 'name': '예지', 'height': 168 }
]
//기존 값 비우기
$('#q2').empty();
//q2에 붙이기(element는 기니까 a로 바꿔서 넣자. 여기에 하나씩 들어오는 것, 서영이부터 시작임)
people.forEach(a => {
let name = a['name'];
let height = a['height'];
// 변수 넣어서 html 만들기
let temp_html = `<p>${name}의 키는 ${height}cm 입니다.</p>`
$('#q2').append(temp_html);
});
}
</script>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습</h1>
</div>
<hr />
<br>
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 붙이기</h2>
<div id="q2">
<p>영수는 24살입니다.</p>
<p>세종은 30살입니다.</p>
<p>수영은 20살입니다.</p>
</div>
</div>
</body>
</html>
- 문제
기존에 있던 id = "q2"의 text들을 지우고 people 객체를 foreach 함수를 사용해
q2에 `서영의 키는 165cm 입니다.`이런 문장을 띄워보자.
- 오답 과정 및 해결 방법
1. empty 대신에 remove를 써봤더니 html을 append해도 화면에 나오지 않았다.
remove() 말고, 다시 text 자리를 위해 empty() 로 쓰기.
$('#q2').empty();
2. name과 height을 따로 변수로 빼주는데 앞에 people로 썼다가 error.
a는 element를 a로 줄여서 썼고 people의 index들 하나하나가 돌아가면서 들어올 공간이기 때문에
a를 써야한다. 그리고 name, height을 변수로 빼줘서 $를 붙이지 않는다.
변수를 ${...}으로 넣어서 html을 만들어서 붙여준다.
people.forEach(a => {
let name = a['name'];
let height = a['height'];
let temp_html = `<p>${name}의 키는 ${height}cm 입니다.</p>`
$('#q2').append(temp_html);
});
아직 익숙하지 않은 제이쿼리를 쓰지 않고 한번 호출해봤다.
제이쿼리를 쓰지 않은 것
people.forEach(a => {
let name = a['name'];
let height = a['height'];
let temp_html = '<p> '+ name + '의 키는 ' + height + 'cm 입니다.</p>';
$('#q2').append(temp_html);
});
'Javascript > 오답노트' 카테고리의 다른 글
| [jQuery] box를 toggle 할 때 왜 getElementById는 안될까? (0) | 2023.12.11 |
|---|---|
| [TODO-LIST 만들기] text input 시, 화면에 띄우기 (0) | 2023.11.12 |