웹
JavaScript 글자 입력 양식 이벤트
언어 수집가
2021. 3. 14. 22:22
사용자로부터 어떤한 입력을 받을 때 사용하는 요소를 입력 양식이라고 부른다.(예: 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> |