js 기본 응용 문제 질문입니다.
본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="UTF-8">
<title>Document</title>
<style>
table,
th,
tr,
td {
border: 1px solid black;
border-collapse: collapse;
width: 450px;
}
fieldset {
width: 420px;
}
</style>
</head>
<body>
<fieldset>자동차 견적</fieldset>
<form action="#">
<table>
<tr>
<th>옵션</th>
<th>추가가격</th>
<th>선택</th>
</tr>
<tr>
<td>인조가죽시트</td>
<td>250000</td>
<td><input type="checkbox" value="250000" name="sheet" class="box" onclick="sumPrice('ck1');"></td>
</tr>
<tr>
<td>네비게이션</td>
<td>250000</td>
<td><input type="checkbox" value="250000" name="navi" class="box" onclick="sumPrice('ck2');"></td>
</tr>
<tr>
<td>선루프</td>
<td>440000</td>
<td><input type="checkbox" value="250000" name="sun" class="box" onclick="sumPrice('ck3');"></td>
</tr>
<tr>
<td>(기본)차량가격</td>
<td colspan="2" id="sum" class="price" value="0" readonly></td>
</tr>
</table>
</form>
<script>
var menu = document.querySelectorAll(".box");
var sum = document.querySelector("#sum");
var price = 13450000;
sum.value = price + "원";
for (i = 0; i < menu.length; i++) {
menu[i].onclick = function() {
if (this.checked == true) {
price += parseInt(this.value);
} else {
price -= parseInt(this.value);
}
document.getElementById("sum").innerHTML = "<br>" + price + "</br>";
// sum.value = price+"원";
}
}
</script>
</body>
</html>
1. sum.value = price + "원"; 에는 왜 var가 붙으면 안되는 건지 궁금 합니다.
2. sum.value = price+"원"; 이것으로 결과 값이 나오게 할 수 있는 방법이 궁금합니다.
3.
var menu = document.querySelectorAll(".box");
querySelectorAll는 전체 선택자로 menu에 대입하고 저장 했다고 선언.
menu는 변수 이므로 이해하기 쉬운 걸로 이름을 정해 작성한다.
var sum = document.querySelector("#sum");
var price = 13450000;
고정 가격
sum.value = price + "원";
for (i = 0; i < menu.length; i++) {
메뉴의 길이 보다 커서 i를 증가 시킨다
menu[i].onclick = function() {
저장 된 배열을 순서대로 꺼내 눌렀을때 함수를 실행한다(매개 변수 없음)
if (this.checked == true) {
조건식: 내자신이 선택된거면 ture다
price += parseInt(this.value);
이 코딩에서 제가 이해한게 맞는지 궁금하며 추가적으로 더 쉽게 이해 할 수 있는 방법이 있다면 알려주시면 감사하겠습니다.
4.price += parseInt(this.value); 가 왜 쓰였는지 궁금합니다.
답변 1
아는 한도 내에서 씁니다 약간 왜곡된 정보일수도 있으니 추후 검색등을 통해 다시 학습하시길 권합니다
1. sum.value = price + "원"; 에는 왜 var가 붙으면 안되는 건지 궁금 합니다.
var 라고 변수 지정을 하고 필요한 곳에서 출력을 하고 싶지만 쩜이 문제입니다
쩜( . )을 쓴다는건 sum이란 변수 안에 그 무엇인가가 포함 되어 있다는 의미로 받아 들이시면 됩니다
대부분 Object형 객체일 경우 그 안의 내용을 참조하기 위해서 사용됩니다 ( 구글 검색 : javascript 리터럴 객체 ) 즉 sum 이란 객체에 value란 객체 멤버명 ( 객체 안의 구분용 변수쯤으로 생각하시면 됩니다 )
가 존재해야 원하시는 답이 될수 있습니다
2. sum.value = price+"원"; 이것으로 결과 값이 나오게 할 수 있는 방법이 궁금합니다.
document.getElementById("sum").innerHTML = "<br>" + price + "</br>";
를 대신해서 넣기를 원하신다면 결론부터 말하면 안됩니다
value란 것은 인풋태그의 값을 의미합니다 그런데 위의 코드는 HTML내부의 값을 가져오거나 대체를
목적으로 하시는 것 같은데 맞지를 않습니다 즉 꼭 써야 한다면
<td colspan="2" id="sum" class="price" value="0" readonly></td>
대신에
<td colspan="2">
<input id="sum" class="price" value="0" readonly>
</td>
위와 같이 되어야 합니다 즉 td내부에 기재된 value는 사용자 정의 태그로 합당치 않습니다
꼭 써야 한다면 value 가 아닌 data-value 와 같이 사용자 지정 데이터 속성으로 기재해야 합니다
( value란 값이 인풋 태그에서 사용되는 속성이므로 )
고친다면 아래와 같겠죠
<td colspan="2" id="sum" class="price" data-value="0" readonly></td>
자바스크립트도 수정이 되어야 하겠구요 즉 위에 기재한 자바스크립트가 작동이 잘 되었다손 치더라도
코드상 좋은 코드라 볼수 없습니다 이는 다른이가 봤을때 오해할 소지가 ( 위에 언급한 ) 있기 때문입니다
3. 메뉴의 길이 보다 커서 i를 증가 시킨다
menu[i].onclick = function() {
저장 된 배열을 순서대로 꺼내 눌렀을때 함수를 실행한다(매개 변수 없음)
=> 배열이 아니라 클래스명으로 기재된 것을 의미합니다
즉 페이지 내에서 id ="아무개" 이것은 하나만 가능하지만
class="아무개" 는 페이지내에서 한개 이상 쓸수 있습니다 그렇기에 menu 변수에 들어간것은
.box 를 가진 클래스 모두를 뜻합니다
즉 box란 이름의 클래스를 가진 갯수 만큼 루프를 돌리고 그 루프 안에서 해당 클래스를 가진 box를
클릭하면 함수를 동작하게 합니다
4.price += parseInt(this.value); price 값에 현재의 value값을 더합니다
클릭시 더하기 뺴기를 하게 되는데 그 값을 추가하거나 뺴거나 하기 위함입니다
위의 코딩상 문제점은 언급했듯이 사용자 정의 데이터에 value란 값을 td 태그 안에 넣은 것이며
이는 data-value등 다른 사용자 정의 태그로 고치거나 혹은 td 안에 input 태그를 넣어서 동작하게 해야 합니다 ( 구글 검색 : 사용자 태그 data- )
너무 너무 감사합니다 혼자 유튜브에 책에 뒤지면서 공부 중인데 너무 쉽게 설명 해주셔가지고 조금이나마 포기 하고 싶던 제 자신에게 용기가 생기는것 같아요!!! 감사합니다!
