내일배움캠프 자바스크립트 기초반 과제
- for문을 이용하여 동일한 클래스명을 가진 요소들에 숫자를 더한 값을 브라우저에 나타내보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<script src="5.js"></script>
</body>
</html>내가 생각한 방법
- querySelector, querySelectorAll getElementsById 중 하나로 클래스명 가져오기.
- 가져온 클래스명 변수로 지정하기.
- for문 안에 지정한 변수 = 변수 + 변수의 인덱스 값을 for문의 결과값으로 도출하기
// 내가 작성한 코드
const numBer = document.querySelectorAll('.number');
for (let i = 0; i < numBer.length; i++) {
numBer[i].innerHTML = numBer[i].innerHTML + 10;
}
결과값
각 div 태그의 값인 숫자에 +10이 된 값이 도출될 줄 알았는데, 문자열처럼 숫자들이 붙어버리고 말았다.
문제점
- html 태그 안의 값은 모두 문자열로 인식한다.
- 태그 안의 값을 그대로 가져와 연산을 하면, 브라우저는 이를 문자로 인식하여 처리한다.
해결방법
- 연산을 하고 싶다면 우선 태그 안의 값을 가져와 정수로 바꾸어 준다.
- 연산을 거친 값을 다시 문자열로 변환해준다.
수정한 코드
const numberElements = document.querySelectorAll('.number');
for (let i = 0; i < numberElements.length; i++) {
const currentValue = parseInt(numberElements[i].innerText, 10);
const newValue = currentValue + 10;
numberElements[i].innerText = newValue.toString();
}- parseInt(변환할 문자열, 변환할 진수)
보통 우리가 사용하는 수는 10진수이므로 두번째 인자로 10을 넣어준다.
두번째 인자는 생략하여도 값이 도출되긴 하지만, 혹시라도 발생할 오류를 막기 위해
적어주는 것이 낫다.
- toString() -> 문자열로 변환하여 주는 메서드
결과 확인
원하는 대로 브라우저에서 잘 읽은 것을 확인할 수 있다.
병아리 개발준비생 🐥