버튼을 클릭했을 때 사용자가 입력한 값을 가져오려면 document.querySelector("") 메서드 안에 #(아이디 선택자)를 사용하면 됩니다. 이 방법을 활용하면 입력 필드의 값을 손쉽게 읽어올 수 있습니다.
JavaScript 코드 예제
다음은 사용자가 입력한 숫자를 가져와 브라우저 콘솔에 출력하는 전체 예제 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="container container-fluid">
<p><strong>예제:</strong> 1부터 100 사이의 숫자를 입력하세요</p>
<form>
<div class="form-group">
<label for="number">숫자 입력:</label>
<input id="inputNumber" value="" type="text" name="number" />
</form>
<p id="output"></p>
</div>
<button class="btn btn-dark" id="choose" type="submit">클릭하세요</button>
</body>
<script>
function example() {
let btn = document.querySelector("#choose");
let randomNumber = Math.ceil(Math.random() * 100);
btn.onclick = function() {
let givenNumber = document.querySelector("#inputNumber").value;
let valueInt = parseInt(givenNumber, 100);
console.log(randomNumber, givenNumber);
};
}
example();
</script>
</html>코드 설명
document.querySelector("#choose")는 아이디가 choose인 버튼 요소를 가져오고, document.querySelector("#inputNumber").value는 입력 필드에 사용자가 입력한 값을 읽어옵니다. 또한 Math.random()과 Math.ceil()을 조합하여 1~100 사이의 무작위 숫자를 생성한 후, 버튼 클릭 시 두 값을 함께 콘솔에 출력합니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 index.html 등으로 저장한 뒤, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 'Open with Live Server' 옵션을 선택하면 됩니다.
출력 결과
프로그램을 실행하면 다음과 같은 화면이 나타납니다.
입력 필드에 원하는 숫자를 입력합니다.
클릭하세요 버튼을 누르면 개발자 도구(F12)의 콘솔 탭에서 생성된 무작위 숫자와 사용자가 입력한 값이 함께 표시되는 것을 확인할 수 있습니다.
