HTML에 JavaScript 연결하기, HTML에서 버튼 입력 계속 받기(document.write, document.getElementById)
0
JavaScript
목록 보기
2/2
1. JS를 HTML에 가져오는 방법.
head 태그 안에 아래처럼 작성하면 된다.
<head> <script src="스크립트이름.js"></script> </head>
2. HTML에서 버튼 입력 계속 받기.
document.write 를 사용하면 document.write("이 안의 내용들만 화면에 남게 된다.")
그래서 기존의 화면들은 유지하되, 화면에 값을 띄우고 싶으면 document.getElementById.innerHTML을 사용하면 된다.
(getElementById = 태그 안의 id 주소값을 가져온다.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="time.js"></script>
<title>시간 변환기</title>
</head>
<body>
<h1>초를 시간, 분, 초로 변환하기</h1>
<form action="">
<input type="number" id="sec" min="0" max="86400">
<button type="button" onclick="start()">시간으로 변환</button>
</form>
<div id="result"></div>
</body>
</html>js 코드
function cal_time(time) {
let hours, minutes, seconds;
hours = Math.floor(time / 3600);
minutes = Math.floor(time % 3600 / 60);
seconds = (time % 60) % 60;
document.getElementById("result").innerHTML = "입력하신 초는 " + hours + "시 " + minutes + "분 " + seconds + "초 입니다.";
}
function start(){
let sec = document.getElementById("sec").value;
if (sec > 86400) {
document.getElementById("result").innerHTML = "86400 이하로 입력하세요.";
} else if (sec< 0) {
document.getElementById("result").innerHTML = "0이상 입력하세요.";
} else{
cal_time(sec);
}
}
document.getElementById("test").innerHTML = "여기에 작성한 값은 화면은 유지하고 값만 따로 출력된다.";
지니입니다