2024-10-15

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        fieldset {
            width: 300px;
        }
    </style>
    <script>
        //  문서의 body 부분을 읽고 자비스크립트를 실행하라는 의미.
        onload = () => {
            //  웹 문서의 특정한 id 선택자의 접근하는 방법
            let productName = document.getElementById("product");

            productName.addEventListener("click", function() {
                console.log("상품명 >>> " + productName.value);
            });
        }

    </script>
</head>
<body>
    
    <div>
        <form name="frm">
            <fieldset>
                <legend>상품정보</legend>
                    <ul>
                        <li> 상품 : <input type="text" name="product" id="product"></li>
                        <li> 수량 : <input type="number" min="1" max="10"></li>
                        <li> <input type="submit" name="주문"></li>
                    </ul>
            </fieldset>
        </form>
    </div>

</body>
</html>

 

'JavaScript > 기초 내용 정리' 카테고리의 다른 글

JavaScript(DOM)_05  (1) 2024.10.15
JavaScript(DOM)_04  (0) 2024.10.15
JavaScript(DOM)_02  (0) 2024.10.15
JavaScript(DOM)_01  (0) 2024.10.15
JavaScript(BOM)_03  (0) 2024.10.15

티스토리툴바