<!DOCTYPE html>
<html>
<head>
<title>장바구니</title>
<script>
function addToCart() {
//menuName 아이디로 받은 값을 menuName변수에 넣어줌
var menuName = document.getElementById("menuName").value;
console.log("-------------------------------------");
console.log(document.getElementById("menuName").value);
console.log("-------------------------------------");
//menuPrice 아이디로 받은 값을 menuPrice변수에 넣어줌
var menuPrice = document.getElementById("menuPrice").value;
//li 요소로 표시할 거란 걸 cartItem 변수에 넣어줌
var cartItem = document.createElement("li");
//변수 cartItem에 담긴 요소의 텍스트 콘텐츠를 "menuName + " - $" + menuPrice" 이런 방식으로 가져와라
cartItem.textContent = menuName + " - $" + menuPrice;
//위에서 아이템들 모아놨으면 이제 카트리스트에 모아야겠지?
//cartList 아이디로 받은 값을 cartList변수에 넣어줌
//.value는 말그래도 받아온 값이고
var cartList = document.getElementById("cartList");
console.log("===================");
console.log(document.getElementById("cartList"));
//<ul id = "cartList">
// <li> "바나나 - $6000"</li>
//</ul>
console.log("===================");
//새로운 요소를 부모 요소에 추가하는 함수.
//parentElement.appendChild(childElement);
//카트리스트라는 부모 요소에 카아이템을 추가함.
cartList.appendChild(cartItem);
document.getElementById("menuName").value = "";
document.getElementById("menuPrice").value = "";
//Q. menuName=" ";이렇게 하면 되는 거 아닌가? 두 개가 같은 거 아니야?
//A. 변수에 값을 할당한 후에 해당 변수의 값을 변경하여 빈 문자열("")로 설정하는 것은 변수의 값만 변경하는 것임. 원본 요소의 값 변경 x
//JavaScript에서 변수에 값을 할당할 때 var menuName = document.getElementById("menuName").value;와 같이 변수에 DOM 요소의 값을 할당하면, 변수와 요소 간에는 단순한 값의 복사가 이루어짐.
//따라서 이후에 변수 menuName의 값을 변경하여도 원본 요소의 값에는 영향을 주지 않음.
//따라서 입력 필드의 값을 비우려면 document.getElementById("menuName").value = "";와 document.getElementById("menuPrice").value = "";와 같이 원본 요소의 값을 직접 변경해야 함. 이렇게 하면 입력 필드에 표시된 값이 비워지게 됨.
}
</script>
</head>
<body>
<h1>장바구니</h1>
<label for="menuName">메뉴 이름:</label>
<input type="text" id="menuName" name="menuName">
<label for="menuPrice">가격:</label>
<input type="number" id="menuPrice" name="menuPrice">
<button onclick="addToCart()">장바구니에 추가</button>
<h2>장바구니 목록</h2>
<ul id="cartList"></ul>
</body>
</html>나의 질문
document.getElementById("menuName").value = "";
document.getElementById("menuPrice").value = "";Q. menuName=" ";이렇게 하면 되는 거 아닌가? 두 개가 같은 거 아니야?
A. 변수에 값을 할당한 후에 해당 변수의 값을 변경하여 빈 문자열("")로 설정하는 것은 변수의 값만 변경하는 것임. 원본 요소의 값 변경 x.
JavaScript에서 변수에 값을 할당할 때 var menuName = document.getElementById("menuName").value;와 같이 변수에 DOM 요소의 값을 할당하면, 변수와 요소 간에는 단순한 값의 복사가 이루어짐.
따라서 이후에 변수 menuName의 값을 변경하여도 원본 요소의 값에는 영향을 주지 않음.
따라서 입력 필드의 값을 비우려면 document.getElementById("menuName").value = "";와 document.getElementById("menuPrice").value = "";와 같이 원본 요소의 값을 직접 변경해야 함. 이렇게 하면 입력 필드에 표시된 값이 비워지게 됨.
느리더라도 꾸준히 확실하게.