[JS] 예제 5종 클릭이벤트, 버튼클릭시 double, 곱하기, 홀짝게임, 구구단 (JavaScript/JQuery)

jychae·2022년 11월 15일
자바스크립트제이쿼리
0

자바스크립트

목록 보기
2/5

📌 클릭이벤트 JavaScript/JQuery

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myclick(){
	console.log("myclick");
	var obj = document.querySelector("#mydiv")

	obj.innerHTML = "Good evening";
	    
}
</script>
</head>

<body>
<div id="mydiv" >Good Morning</div>
<input type="button" value="click" onclick="myclick()">
</body>
</html>
//----------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
/* 
$(document).ready(function(){
	$("#btn").click(function(){
		
		$("#mydiv").text("Good evening");
		
		
	})
}); 
*/

function myclick(){
	$("#mydiv").html("Good evening");
}	

$(document).ready(function(){
	$("#btn").bind("click", function (event) {
	    myclick();
	});
});

</script>
</head>

<body>
<div id="mydiv" >Good Morning</div>
<input type="button" value="click" id="btn" onclick="myclick()">
</body>
</html>

📌 버튼클릭시 double JavaScript/JQuery


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myclick(){
	console.log("myclick")

// 	var it = document.querySelector("#it");
	
// 	var num = it.value;
		
// 	num = parseInt(num)* 2;
	
// 	it.value = num;
	
//-----------------------------------------------	
// 	var num = document.querySelector("#it").value;
	
// 	num =  parseInt(num)* 2;
	
// 	document.querySelector("#it").value = num
	
//-----------------------------------------------	

// 	var num = (document.querySelector("#it").value) * 2;
	
// 	document.querySelector("#it").value = num

//-------------------------------------------------
	var obj = document.querySelector("#it");
	var a = obj.value;
	var aa = parseInt(a)*2;
	obj.value = aa;
	
}
</script>
</head>

<body>
<input type="text" id="it" value="200"/>
<input type="button" value="double" onclick="myclick()"/>

</body>
</html>
//----------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
function myclick(){
	var a = $("#it").val();
	var aa = parseInt(a)*2;
	$("#it").val(aa);
	
}

$(document).ready(function(){
	$("#btn").bind("click", function (event) {
	    myclick();
	});
});
</script>
</head>

<body>
<input type="text" id="it" value="200"/>
<input type="button" value="double" id="btn" />

</body>
</html>

📌 곱하기 JavaScript/JQuery


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
input{
	width: 30px;
}
</style>
<script type="text/javascript">
function myclick(){
	console.log("myclick");
	
	var obj1 = document.querySelector("#it1");
	var obj2 = document.querySelector("#it2");
	var obj3 = document.querySelector("#it3");
	var a = parseInt(obj1.value);
	var b = parseInt(obj2.value);
	
	console.log(a, b);
	console.log(obj1.value, obj2.value);
	
	var mul = parseInt(a)*parseInt(b);
	obj3.value = mul;
	    
}
</script>
</head>

<body>
<input type="text" id="it1"/> * <input type="text" id="it2"/> 
<input type="button" value="=" onclick="myclick()"/> <input type="text" id="it3"/> 
</body>
</html>
//----------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
input{
	width: 30px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
function myclick(){
	
	var a = parseInt($("#it1").val());
	var b = parseInt($("#it2").val());
	var mul = a*b;
	$("#it3").value = mul;
	    
}

$(document).ready(function(){
	$("#btn").bind("click", function (event) {
	    myclick();
	});
});

</script>
</head>

<body>
<input type="text" id="it1"/> * <input type="text" id="it2"/> 
<input type="button" value="=" id="btn" /> 
<input type="text" id="it3"/> 
</body>
</html>

📌 홀짝게임 JavaScript/JQuery


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.it {
	width: 30px;
}
</style>
<script type="text/javascript">
function myclick(){
	console.log("myclick");
	var obj_com = document.querySelector("#it_com");
	var obj_mine = document.querySelector("#it_mine");
	var obj_result = document.querySelector("#it_result");
	
	var com = ""
    var mine = obj_mine.value;
    var result = ""
    
    console.log(com,mine,result);

    var rnd = Math.random();
    console.log(rnd)
    
    if (rnd > 0.5) {
        com = "홀" ;
    } else {
        com = "짝" ;
    }
    console.log(com)
    
    if (com == mine) {
        result ="승리" ;    
    } else {
        result ="패배" ;
    }
    
    obj_com.value = com;
    obj_result.value = result;
   
}
</script>
</head>

<body>
<table border="1px">
	<tr>
		<td>나:</td>
		<td>
			<input type="text" class="it" id="it_mine"/>
		</td>
	</tr>
	<tr>
		<td>컴:</td>
		<td>
			<input type="text" class="it" id="it_com"/>
		</td>
	</tr>
	<tr>
		<td>결과:</td>
		<td>
			<input type="text" class="it" id="it_result"/>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="button" value="게임하기" onclick="myclick()"/>
		</td>
	</tr>
</table>
</body>
</html>
//----------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.it {
	width: 30px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
function myclick(){

	var com = "";
    var mine = $("#it_mine").val();
    var result = ""
    
    var rnd = Math.random();
    
    if (rnd > 0.5) {
        com = "홀" ;
    } else {
        com = "짝" ;
    }
    console.log(com)
    
    if (com == mine) {
        result ="승리" ;    
    } else {
        result ="패배" ;
    }
    
    $("#it_com").val(com);
    $("#it_result").val(result);

}
$(document).ready(function(){
	$("#btn").bind("click", function (event) {
	    myclick();
	});

    $(".it").bind("keyup", function (event) {
        if (event.key == "Enter") {
        	 myclick();
        }
    });
}); 

/* 
$(document).ready(function() {
    // ID가 message에서 엔터키를 누를 경우
    $(".it").keydown(function (key) {
        if (key.keyCode == 13) {
        	 myclick();
        }
    });
}); 
*/

/* 
$(document).ready(function(){
	$("#btn").bind("click", function (event) {
	    myclick();
	});
});
 */
</script>
</head>

<body>
<table border="1px">
	<tr>
		<td>나:</td>
		<td>
			<input type="text" class="it" id="it_mine"/>
		</td>
	</tr>
	<tr>
		<td>컴:</td>
		<td>
			<input type="text" class="it" id="it_com"/>
		</td>
	</tr>
	<tr>
		<td>결과:</td>
		<td>
			<input type="text" class="it" id="it_result"/>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="button" value="게임하기"  id="btn"/>
		</td>
	</tr>
</table>
</body>
</html>

📌 구구단 JavaScript/JQuery


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#mytd{
	height: 200px;
	text-align: center;
}
</style>
<script type="text/javascript">
function myclick(){
	console.log("myclick");
	
// 	var mysel =  document.querySelector("#mysel").value;
// 	var mytd =  document.querySelector("#mytd");
// 	console.log(mysel);
	
// 	var sel = parseInt(mysel);
// 	var txt = "";
	

// 	txt += sel + "*" + 1 +"="+ (1 * sel)+"<br/>";
// 	txt += sel + "*" + 2 +"="+ (2 * sel)+"<br/>";
// 	txt += sel + "*" + 3 +"="+ (3 * sel)+"<br/>";
// 	txt += sel + "*" + 4 +"="+ (4 * sel)+"<br/>";
// 	txt += sel + "*" + 5 +"="+ (5 * sel)+"<br/>";
// 	txt += sel + "*" + 6 +"="+ (6 * sel)+"<br/>";
// 	txt += sel + "*" + 7 +"="+ (7 * sel)+"<br/>";
// 	txt += sel + "*" + 8 +"="+ (8 * sel)+"<br/>";
// 	txt += sel + "*" + 9 +"="+ (9 * sel)+"<br/>";
	
// 	mytd.innerHTML = txt;

	var obj_div = document.querySelector("#mydiv");
	
	var s =  document.querySelector("#mysel");
	var dan =  s.options[s.selectedIndex].value;
	var idan = parseInt(dan);
	
	var txt = ""
	
// 	txt += "2*1=2<br/>\n";
// 	txt += "2*1=2<br/>\n";

	txt += `${idan} * ${1} = ${dan*1} <br/>\n`; // 백틱
	txt += dan + "*" + 2 + "=" + (dan*2) + "<br/>\n"; //기본
	txt += dan + "*" + 3 + "=" + (dan*3) + "<br/>\n";
	txt += dan + "*" + 4 + "=" + (dan*4) + "<br/>\n";
	txt += dan + "*" + 5 + "=" + (dan*5) + "<br/>\n";
	txt += dan + "*" + 6 + "=" + (dan*6) + "<br/>\n";
	txt += dan + "*" + 7 + "=" + (dan*7) + "<br/>\n";
	txt += dan + "*" + 8 + "=" + (dan*8) + "<br/>\n";
	txt += dan + "*" + 9 + "=" + (dan*9) + "<br/>\n";
			
	

	obj_div.innerHTML = txt;	
	
}
</script>
</head>

<body>
<table border="1">
	<tr>
		<td>단수</td>
		<td>
			<select id="mysel">
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
			</select>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="button" value="출력하기" onclick="myclick()">
		</td>
	</tr>
	<tr>
		<td id="mytd" colspan="2">
			<div id="mydiv"></div>
		</td>
	</tr>
</table>
</body>
</html>
//----------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#mytd{
	height: 200px;
	text-align: center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
function myclick(){

	var dan = $("#mysel option:selected").val();
	var idan = parseInt(dan);
	
	var txt = ""

	txt += `${idan} * ${1} = ${dan*1} <br/>\n`; // 백틱
	txt += dan + "*" + 2 + "=" + (dan*2) + "<br/>\n"; //기본
	txt += dan + "*" + 3 + "=" + (dan*3) + "<br/>\n";
	txt += dan + "*" + 4 + "=" + (dan*4) + "<br/>\n";
	txt += dan + "*" + 5 + "=" + (dan*5) + "<br/>\n";
	txt += dan + "*" + 6 + "=" + (dan*6) + "<br/>\n";
	txt += dan + "*" + 7 + "=" + (dan*7) + "<br/>\n";
	txt += dan + "*" + 8 + "=" + (dan*8) + "<br/>\n";
	txt += dan + "*" + 9 + "=" + (dan*9) + "<br/>\n";

	$("#mydiv").html(txt);	
	
	
}

$(document).ready(function(){
	$("#btn").bind("click", function (event) {
	    myclick();
	});
});
</script>
</head>

<body>
<table border="1">
	<tr>
		<td>단수</td>
		<td>
			<select id="mysel">
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
			</select>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="button" value="출력하기" id="btn">
		</td>
	</tr>
	<tr>
		<td id="mytd" colspan="2">
			<div id="mydiv"></div>
		</td>
	</tr>
</table>
</body>
</html>
profile
jychae
안녕하세요! 초보개발자 공부 시작!
이전 포스트

[JS] 스크립트정리, JSON, 파라미터, 애매한this

다음 포스트

[JS] 예제 5종 로또, 전화번호 전화기, 가위바위보, 별찍기, 야구게임(JavaScript/JQuery)

0개의 댓글