본문 바로가기
Python/Muzi

JS강화학습06. 별찍기

by 미눅스[멘토] 2023. 7. 12.
728x90

ex06.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
input[name='it_first'], input[name='it_last']{
	width:40px;
}
#ta{
	height: 200px;
}


</style>

<script>
function getStar(cnt){
	var ret = "";
	for(var i=0; i<cnt; i++){
		ret += "*";
	}
	ret +="\n";
	return ret;
}

function myclick(){
	var obj_f = document.querySelector("input[name='it_first']");
	var obj_l = document.querySelector("input[name='it_last'");
	var f = obj_f.value;
	var l = obj_l.value;
	var ff = parseInt(f);
	var ll = parseInt(l);
	
	var txt = "";
	
// 	for(var i=ff; i<=ll; i++){
// 		txt += getStar(i)
// 	}
	
	for(var i=ff; i<=ll; i++){
		for(var j=0; j<i; j++){
			txt += "*";
		}
		txt += "\n";
	}
	
	
	ta.value=txt;    
}


</script>

</head>
<body>
EX06
<table border="1">
	<tr>
		<td>시작별수 :</td>
		<td>
			<input type="text" name="it_first">
		</td>
	</tr>
	<tr>
		<td>끝별수 :</td>
		<td>
			<input type="text" name="it_last">
		</td>
	</tr>
	
	<tr>
		<td colspan="2">
			<input type="button" value="별출력하기" onclick="myclick()">
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<textarea id="ta" rows="" cols=""></textarea>
		</td>
	</tr>
	
	
</table>
</body>
</html>

시작별수와 끝별수에 숫자 입력후 별출력하기 클릭시

 

 

 

 

결과