웹(Web)/자바스크립트

2. 나이계산하기

나굥 2021. 3. 1. 15:13
728x90

2. 나이계산하기 CSS :: as_always (tistory.com)

 

2. 나이계산하기 CSS

        body {            text-align:center;         }         .btn {             margin-top:50px;             font-weight: 400;    ..

always-here.tistory.com

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>나이 계산하기</title>

    <link rel="stylesheet" href="css/age.css">

</head>

<body>  

    <button class="btn" onclick="calc()">나이 계산하기</button>

    <div id="result" class="show">(결과 값 표시)</div>

    <script>

        function calc() {

            var currentYear = 2019;

            var birthYear = prompt("태어난 연도를 입력하세요.","YYYY");;

            var age;

            age = currentYear - birthYear + 1;

            document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세입니다.";

        }

    </script>

</body>

</html>

  • document.querySelector("#result").innerHTML id값이 result인 태그 선택, HTML에 삽입
728x90