728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function gugu(){
var dan = document.getElementById("dan").value; //태그 안의 '값'을 dan에 담아줌
var disp = document.getElementById("disp"); //태그에 대한 '정보'를 disp에 담음
var result = ""; //빈 문자열에 결과를 담을 예정
//유효성체크 (ex. id중복체크기능)
if(dan<2||dan>9){
alert("2~9의 숫자만 입력해주세요");
return; //함수탈출
}
if(dan.trim()==""){
alert("값을 입력해주세요");
return;
}
for(var i = 1; i<10; i++){
result = result +dan+"x"+i+"="+(dan*i)+"<br>"; //누적
}
disp.innerHTML = result; //disp가 가리키는 <div> 요소의 내부 HTML 콘텐츠를
result 변수에 저장된 문자열로 대체하라는 의미.
즉, 계산 결과가 문자열로 만들어진 result 변수의 값으로
<div> 요소의 내용을 변경하게 됨
}
var b_show = true; //버튼의 현재상태(true)
function show(){
b_show = !b_show; //버튼의 상태변환 (true->false, false->true)
document.getElementById("bt_show").value = b_show ? "숨기기" : "보이기";
//id가 bt_show인 버튼요소의 value 속성 변경. b_show의 값에 따라 버튼 글자만 변경됨
document.getElementById("disp").style.display = b_show ? "block" : "none";
//id가 disp인 div요소의 style.display 속성 변경. b_show의 값에 따라 실제 숨기거나 보이게함
}
</script>
</head>
<body>
<p>
단:
<input id="dan">
<input type="button" value="계산시작" onclick="gugu();">
<input type="button" id="bt_show" value="숨기기" onclick="show();">
</p>
<hr>
<div id = "disp">
여기에 구구단
</div>
</body>
</html>
728x90
'JavaScript' 카테고리의 다른 글
| [JS] 이미지 슬라이드쇼 만들기 (2) | 2023.10.10 |
|---|---|
| [JS] 계산기 만들기 (0) | 2023.10.10 |
| [JS] input태그 (0) | 2023.10.10 |
| [JS] 함수 선언과 호출 (0) | 2023.10.09 |
| [JS] Object (0) | 2023.10.09 |