상황 : 계산기 기능을 구현하기 위해 코딩을 하고 있었다. 그런데, 스크립트에서 선언한 write()라는 함수가 제대로 작동하지 않았다. text 타입에 문자열을 이어붙이는 역할을 하는 함수인데, 자꾸만 화면에 해당하는 숫자만 출력되었다.
원인 : 알고봤더니, onclick ="write(블라블라)" 라고 작성하면, document.write(블라블라) 가 실행되었다. 나와 같은 문제를 기존에 겪은 분이 있어서 수월하게 이해됐다. 앞으로, 함수가 제대로 작동하지 않으면 '자바스크립트 내에서 이미 사용하고 있는 함수명' 인지 조사해보자.
해결 : wirte() 함수를 add 라는 함수명으로 바꿨더니 잘 실행됐다.
+ 추가사항 : clear 이란 함수도 자바스크립트 내에 이미 존재하는 함수다. 따라서 reset으로 변경했다.
<!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 write(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 clear(){
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 = "write(7)"/></td>
<td><input type = "button" value ="8" onclick = "write(8)" /></td>
<td><input type = "button" value ="9" onclick = "write(9)"/></td>
<td><input type = "button" value ="/" onclick = "write(/)"/></td>
</tr>
<tr>
<td><input type = "button" value ="4" onclick = "write(4)"/></td>
<td><input type = "button" value ="5" onclick = "write(5)"/></td>
<td><input type = "button" value ="6" onclick = "write(6)"/></td>
<td><input type = "button" value ="*" onclick = "write(*)"/></td>
</tr>
<tr>
<td><input type = "button" value ="1" onclick = "write(1)"/></td>
<td><input type = "button" value ="2" onclick = "write(2)"/></td>
<td><input type = "button" value ="3" onclick = "write(3)"/></td>
<td><input type = "button" value ="-" onclick = "write(-)"/></td>
</tr>
<tr>
<td><input type = "button" value ="0" onclick = "write(0)"/></td>
<td><input type = "button" value ="." onclick = "write(.)"/></td>
<td><input type = "button" value ="+" onclick = "write(+)"/></td>
<td><input type = "button" value ="%" onclick = "write(%)"/></td>
</tr>
<tr>
<td colspan = "2"><input type = "button" value ="=" onclick = "calculate()"/></td>
<td colspan = "2"><input type = "button" value ="Clear" onclick = "clear()"/></td>
</tr>
</table>
</body>
</html><!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>
>>>참조 : https://csy7792.tistory.com/14
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] 버튼을 누를 때마다 동적으로 변하는 페이지 만들기(숫자 증감) (0) | 2020.06.21 |
|---|---|
| [JS] 버튼을 누를 때마다 동적으로 변하는 페이지 만들기(계산기) (0) | 2020.06.21 |
| [JS] 이벤트 버블링 적용 및 제한 (0) | 2020.06.19 |
| [JS] 버튼을 눌렀을 때 alert 하기 (0) | 2020.06.19 |
| [JS] 스크립트에 css 적용하기 (0) | 2020.06.19 |
