자바스크립트 계산기 만들었는데 도저히 안 되는 게 있네요
본문
script.js)
var numberClicked = false;
const test = 100;
function add(char) {
if (numberClicked == false) {//이전에 연산자를 입력했는데
if (document.getElementById('display').value == "") {// display 값이 ""일 때 = 아무것도 써져 있지 않을 때
if (isNaN(char) == true) {//연산자를 입력하였음
alert("연산자 먼저 입력할 수 없음。");
AllClear();
}
else {
document.getElementById('display').value += char; //이것을 추가하지 않으면 숫자를 누르는 데 버퍼가 생깁니다
check();
}
}
else if (isNaN(char) == true) {//입력 받은 값이 또 다시 연산자라면
var display = document.getElementById('display');
display.value = display.value.substring(0, display.value.length - 1); //맨 뒤의 한 글자를 지운다
document.getElementById('display').value += char; // 식 뒤에 값을 추가한다
check();
}
else {//연산자가 아니라면
document.getElementById('display').value += char;
check();
}
}
else {//이전에 숫자를 입력했다면
document.getElementById('display').value += char;
check();
}
// 숫자/연산자를 눌렀는지 설정한다
if (isNaN(char) == true) {//숫자가 아닌 것이 참 = 연산자를 눌렀다면
numberClicked = false; //false로 설정
} else {
numberClicked = true;//true로 설정
}
}
function Calculate() {
var display = document.getElementById('display');
var result = eval(display.value
.replace('\u00D7', '*')
.replace('\u00F7', '/'));
result = +result.toFixed(5);
document.getElementById('result').value = result;
}
function AllClear() {
document.getElementById('display').value = "";
document.getElementById('result').value = "";
numberClicked = false;//AC를 누르면 연산자를 입력했던 것으로 판정하여 숫자 없이 연산자를 누를 때 에러메시지를 송출함.
}
function Delete() {
var display = document.getElementById('display');
display.value = display.value.substring(0, display.value.length - 1);
}
function check() {
var display = document.getElementById('display');
if (display > test) {
alert("100을 넘어감");
AllClear();
} else {
return;
}
}
다른 기능은 문제가 없고, check()를 써서 계산기에 입력하는 부분인 display의 값이 일정 이상이면 오류를 띄우게 하고 싶은데 도저히 안 되네요.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
<title>A simple calculator</title>
</head>
<body>
<div id="container">
<div id="calculator">
<div id="kamen">
<div id="history">
<input type="text" name="display" id="display" disabled size="28" />
</div>
<div id="output">
<input type="text" id="result" size="16" disabled />
</div>
</div>
<div id="keyboard">
<button onclick="AllClear()">AC</button>
<button onclick="Delete()">DEL</button>
<button onclick="add('%')">%</button>
<button onclick="add('\u00F7')">÷</button>
<button onclick="add('7')">7</button>
<button onclick="add('8')">8</button>
<button onclick="add('9')">9</button>
<button onclick="add('\u00D7')">×</button>
<button onclick="add('4')">4</button>
<button onclick="add('5')">5</button>
<button onclick="add('6')">6</button>
<button onclick="add('-')">-</button>
<button onclick="add('1')">1</button>
<button onclick="add('2')">2</button>
<button onclick="add('3')">3</button>
<button onclick="add('+')">+</button>
<button onclick="add('.')">.</button>
<button onclick="add('0')">0</button>
<button onclick="add('00')">00</button>
<button onclick="Calculate()">=</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: 'Open Sans',sans-serif;
background-color: black;
}
#container {
width: 1000px;
height: 550px;
margin: 20px auto;
}
#calculator {
width: 320px;
height: 520px;
background-color: #eaedef;
margin: 0 auto;
top: 20px;
position: relative;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#kamen {
height: 120px;
}
#display {
text-align: right;
height: 30px;
margin: 15px 20px 20px 35px;
font-size: 15px;
color: #000000;
}
#result {
text-align: right;
margin: 5px 20px 20px 32px;
font-size: 25px;
color: #000000;
}
#keyboard {
height: 400px;
}
button {
width: 50px;
height: 50px;
margin: 15px;
float: left;
border-radius: 50%;
border-width: 0;
font-weight: bold;
font-size: 15px;
}
button:nth-child(4) {
font-size: 20px;
background-color: #20b2aa;
}
button:nth-child(8) {
font-size: 20px;
background-color: #ffa500;
}
button:nth-child(12) {
font-size: 20px;
background-color: #f08080;
}
button:nth-child(16) {
font-size: 20px;
background-color: #7d93e0;
}
button:nth-child(20) {
font-size: 20px;
background-color: #9477af;
}
html 파일이랑 css 파일입니다.
대체 어떻게 해야 일정 이상 숫자가 나오면 오류가 나오게 할 수 있는 지 모르겠습니다
답변 2
function check() {
var display = document.getElementById('display').value;
if (display > test) {
alert("100을 넘어감");
AllClear();
} else {
return;
}
}
value가 빠졌어요
아 감사합니다
사족입니다만 add('1') 으로 할게 아니라 모든 버튼을 하나로 묶고 각각의 value 를 부여하면 훨씬 깔끔해지지 않을까 싶습니다. ^^
아 그런 방법이 있네요, 조언해주셔서 감사합니다
답변을 작성하시기 전에 로그인 해주세요.
