<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
td {
width : 50px;
height : 50px;
}
input {
width : 96%;
height :96%;
font-size: 20px;
}
</style>
<script>
function add(expression){
let display = document.getElementById('display');
display.value += expression;
}
function calculate(){
let display = document.getElementById('display');
let result = eval(display.value);
display.value = result;
}
function reset(){
let display = document.getElementById('display')
display.value = " ";
}
</script>
</head>
<body>
<table border = "1">
<tr>
<td colspan = "4"><input type = "text" id = "display"></td>
</tr>
<tr>
<td><input type = "button" value ="7" onclick = "add(7)"/></td>
<td><input type = "button" value ="8" onclick = "add(8)" /></td>
<td><input type = "button" value ="9" onclick = "add(9)"/></td>
<td><input type = "button" value ="/" onclick = "add('/')"/></td>
</tr>
<tr>
<td><input type = "button" value ="4" onclick = "add(4)"/></td>
<td><input type = "button" value ="5" onclick = "add(5)"/></td>
<td><input type = "button" value ="6" onclick = "add(6)"/></td>
<td><input type = "button" value ="*" onclick = "add('*')"/></td>
</tr>
<tr>
<td><input type = "button" value ="1" onclick = "add(1)"/></td>
<td><input type = "button" value ="2" onclick = "add(2)"/></td>
<td><input type = "button" value ="3" onclick = "add(3)"/></td>
<td><input type = "button" value ="-" onclick = "add('-')"/></td>
</tr>
<tr>
<td><input type = "button" value ="0" onclick = "add(0)"/></td>
<td><input type = "button" value ="." onclick = "add('.')"/></td>
<td><input type = "button" value ="+" onclick = "add('+')"/></td>
<td><input type = "button" value ="%" onclick = "add('%')"/></td>
</tr>
<tr>
<td colspan = "2"><input type = "button" value ="=" onclick = "calculate()"/></td>
<td colspan = "2"><input type = "button" value ="Clear" onclick = "reset()"/></td>
</tr>
</table>
</body>
</html>
input 태그의 type 속성을 선택자로 쓰려면 어떻게 할까? 아래처럼 하면 된다.
input[type='button']{
/* padding : 0 20px;
margin : 0px 5px; */
}
다른 버전
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#monitor {
text-align: right
}
input[type='button'] {
padding: 0 20px;
margin: 0px 5px;
}
</style>
<script>
function clickData(data) {
let monitor = document.getElementById("monitor")
if(data == 'clear') {
monitor.value = '';
} else if(data == '=') {
monitor.value = eval(monitor.value)
} else {
monitor.value += data
}
}
</script>
</head>
<body>
<input type="text" id="monitor"><br>
<input type="button" value="1" onclick="clickData('1')" >
<input type="button" value="2" onclick="clickData('2')" >
<input type="button" value="3" onclick="clickData('3')" >
<input type="button" value="4" onclick="clickData('4')" > <br>
<input type="button" value="+" onclick="clickData('+')" >
<input type="button" value="-" onclick="clickData('-')" >
<input type="button" value="=" onclick="clickData('=')" >
<input type="button" value="clear" onclick="clickData('clear')">
</body>
</html>
다른 버전 : this를 응용해보자.
this를 사용하면, 해당 태그 자체를 넘길 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#monitor {
text-align: right
}
input[type='button'] {
padding: 0 20px;
margin: 0px 5px;
}
</style>
<script>
function clickData(data) {
console.log(data)
let monitor = document.getElementById("monitor")
if(data == 'clear') {
monitor.value = '';
} else if(data == '=') {
monitor.value = eval(monitor.value)
} else {
monitor.value += data
}
}
</script>
</head>
<body>
<input type="text" id="monitor"><br>
<input type="button" value="1" onclick="clickData(this)" >
<input type="button" value="2" onclick="clickData(this)" >
<input type="button" value="3" onclick="clickData(this)" >
<input type="button" value="4" onclick="clickData(this)" > <br>
<input type="button" value="+" onclick="clickData(this)" >
<input type="button" value="-" onclick="clickData(this)" >
<input type="button" value="=" onclick="clickData(this)" >
<input type="button" value="clear" onclick="clickData('clear')">
</body>
</html>
애초에 this.value 넘기면 된다!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#monitor {
text-align: right
}
input[type='button'] {
padding: 0 20px;
margin: 0px 5px;
}
</style>
<script>
/*
function clickData(obj) {
let data = obj.value
let monitor = document.getElementById("monitor")
if(data == 'clear') {
monitor.value = '';
} else if(data == '=') {
monitor.value = eval(monitor.value)
} else {
monitor.value += data
}
}
*/
function clickData(data) {
let monitor = document.getElementById("monitor")
if(data == 'clear') {
monitor.value = '';
} else if(data == '=') {
monitor.value = eval(monitor.value)
} else {
monitor.value += data
}
}
</script>
</head>
<body>
<input type="text" id="monitor"><br>
<input type="button" value="1" onclick="clickData(this.value)" >
<input type="button" value="2" onclick="clickData(this.value)" >
<input type="button" value="3" onclick="clickData(this.value)" >
<input type="button" value="4" onclick="clickData(this.value)" > <br>
<input type="button" value="+" onclick="clickData(this.value)" >
<input type="button" value="-" onclick="clickData(this.value)" >
<input type="button" value="=" onclick="clickData(this.value)" >
<input type="button" value="clear" onclick="clickData(this.value)">
</body>
</html>'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] 태그 가져오기(2) document.querySelector(), querySelectorAll() (0) | 2020.06.22 |
|---|---|
| [JS] 버튼을 누를 때마다 동적으로 변하는 페이지 만들기(숫자 증감) (0) | 2020.06.21 |
| [JS] 작성한 함수가 제대로 작동하지 않는 문제 (원인 : 자스크립트 내에 이미 있는 함수일 경우) (0) | 2020.06.21 |
| [JS] 이벤트 버블링 적용 및 제한 (0) | 2020.06.19 |
| [JS] 버튼을 눌렀을 때 alert 하기 (0) | 2020.06.19 |
