본문 바로가기
HTML

HTML, 2 개의 숫자 더하기

by treeCoder 2021. 9. 25.

HTML, 2 개의 숫자 더하기이다.

<!doctype html>
<html>
<head>
<title>Do Math</title>
</head>
<body>
    <h1>Add two numbers</h1>
    <h3>&nbsp;&nbsp;Enter 2 numbers in the below boxes to get the sum. </h3>
    
    <input type = "number" id = "my_input1"/>
    <input type = "number" id = "my_input2"/>
    <input type = "button" value = "Add them Together" onclick = "doMath();"/>
    <h2 id="output"></h2>
    <script type = "text/javascript">
        function doMath() {
            var my_input1 = document.getElementById('my_input1').value;
            var my_input2 = document.getElementById('my_input2').value;
            //Add them Together and Display

            var sum = parseFloat(my_input1) + parseFloat(my_input2);
            document.getElementById('output').innerHTML = "The sum is " +  sum;
        }
    </script>
</body>

실행결과는 아래와 같다.

댓글