728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
li{list-style: none;
float : left;
margin-left: 10px;}
ul{overflow: hidden;} /*자식인 li가 float속성을 가지므로 부모인 ul은 overflow:hidden을 가짐*/
input{border-style: none;}
</style>
<script type="text/javascript">
function cal(n){
var num1 = Number(document.getElementById("su1").value); //형변환 : parseInt도 되고 Number도 됨!
var num2 = Number(document.getElementById("su2").value);
var num3 = document.getElementById("result");
if(n=="+"){
num3.value = num1+num2;
}else if(n=="-"){
num3.value = num1-num2;
}else if(n=="*"){
num3.value = num1*num2;
}else if(n=="/"){
num3.value = num1/num2;
}
}
</script>
</head>
<body>
<table border="1">
<tr>
<th class="su">수1</th>
<td><input id="su1" placeholder="정수만 입력하세요"></td> <!--placeholder : 도움말 -->
</tr>
<tr>
<th class="su">수2</th>
<td><input id="su2" placeholder="정수만 입력하세요"></td>
</tr>
<tr>
<td colspan="2">
<ul>
<li><input type="button" value="+" onclick="cal('+')"></li>
<li><input type="button" value="-" onclick="cal('-')"></li>
<li><input type="button" value="*" onclick="cal('*')"></li>
<li><input type="button" value="/" onclick="cal('/')"></li>
</ul>
</td>
</tr>
<tr>
<th>결과</th>
<td><input id="result"></td>
</tr>
</table>
</body>
</html>
728x90
'JavaScript' 카테고리의 다른 글
| [JS] form_1 (1) | 2023.10.10 |
|---|---|
| [JS] 이미지 슬라이드쇼 만들기 (2) | 2023.10.10 |
| [JS] 구구단 만들기 (1) | 2023.10.10 |
| [JS] input태그 (0) | 2023.10.10 |
| [JS] 함수 선언과 호출 (0) | 2023.10.09 |