=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
fieldset {
width: 300px;
}
</style>
<script type="text/javascript">
// 문서의 body 부분을 읽고 자바스크립트를 실행하라는 의미
onload = () => { // window.onload = function(){ } -> window는 생략 가능
// 웹 문서의 특정한 id 선택자에 접근하는 방법
let productName = document.getElementById("product"); // 현재 문서에서 id가 "product"인 요소를 가져와라!
productName.addEventListener("click", function(){
console.log(`상품명 : ` + productName.value);
});
};
</script>
</head>
<body>
<div align = "center">
<form name ="order">
<fieldset>
<legend>상품 정보</legend>
<ul>
<li>상 품 : <input type = "text" id = "product" name = "product"> </li>
<li>수 량 : <input type = "number" min = "1" max = "50"> </li>
<li> <input type = "submit" value = "주문"> </li>
</ul>
</fieldset>
</form>
</div>
</body>
</html>=============================실행=============================
콘솔창에 확인해보면 값이 출력되는 것을 확인할 수 있음!
