사용자로부터 어떤한 입력을 받을 때 사용하는 요소를 입력 양식이라고 부른다.(예: input, textarea, button, select)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const input = document.querySelector('input') | |
| const button = document.querySelector('button') | |
| const p = document.querySelector('p') | |
| button.addEventListener('click', () => { | |
| const inch = input.value | |
| if (isNaN(inch)) { | |
| p.textContent = '숫자를 입력해주세요' | |
| return | |
| } | |
| const cm = inch * 2.54 | |
| p.textContent = `${cm}cm` | |
| }) | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <input type="text"> inch<br> | |
| <button>계산</button> | |
| <p></p> | |
| </body> | |
| </html> |
'웹' 카테고리의 다른 글
| node.js PM2 모듈 (0) | 2021.03.21 |
|---|---|
| 드롭다운 목록 활용 (0) | 2021.03.14 |
| JavaScript 이벤트 발생 객체 (0) | 2021.03.14 |
| JavaScript 이벤트 설정 (0) | 2021.03.14 |
| JavaScript 문서 객체 조작 (0) | 2021.03.14 |
