- 6
- studyHTML
- 조회 수 552
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Studyhtml의 숲: 계산기-Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.maintitle {
font-family:"맑은 고딕", 돋움, 굴림, Arial, Helvetica, sans-serif; font-size:20px; color:green; text-align:center; text-decoration:none;
}
.locationcenter {
text-align:center; font-family:"맑은 고딕", 돋움, 굴림, Arial, Helvetica, sans-serif;
}
body {
background-color:whitesmoke;
}
</style>
</head>
<body>
<div style="width:300px; height:20px; margin-left:auto; margin-right:auto; margin-top:0%; margin-bottom:0%; background-color:white; display:table;">
<div style="display: table-cell; vertical-align: middle;">
<h1 class="maintitle"><strong><a href="/index.html"; class="maintitle"></strong>Studyhtml의 숲</a></h1>
</div>
</div>
<div style="width:65%; height:900px; margin-left:auto; margin-right:auto; margin-top:8%; margin-bottom:0%; background-color:lightgoldenrodyellow; border-style:solid;">
<h3 class="locationcenter">계산기-Javascript</h3>
<hr>
<div style="width:180px; height:340px; margin-left:auto; margin-right:auto; border-style:solid; border-width:3px;">
<div style="width:160px; height:40px; margin-left:auto; margin-right:auto; border-style:solid; border-width:2px;">
<h5 style="font-size:36px; text-align:right; display:inline; max-width:120px;" id="answertext">0</h5>
</div>
<div style="width:180px; height:240px; margin-top:20px; margin-left:auto; margin-right:auto; border-style:solid; border-width:2px;">
<input type=button value="1" onclick=enter1(answer) style="width:50px; height:20px;">
<input type=button value="2" onclick="enter2(answer)" style="width:50px; height:20px;">
<input type=button value="3" onclick="enter3(answer)" style="width:50px; height:20px;">
<input type=button value="4" onclick="enter4(answer)" style="width:50px; height:20px;">
<input type=button value="5" onclick="enter5(answer)" style="width:50px; height:20px;">
<input type=button value="6" onclick="enter6(answer)" style="width:50px; height:20px;">
<input type=button value="7" onclick="enter7(answer)" style="width:50px; height:20px;">
<input type=button value="8" onclick="enter8(answer)" style="width:50px; height:20px;">
<input type=button value="9" onclick="enter9(answer)" style="width:50px; height:20px;">
<input type=button value="0" onclick="enter0(answer)" style="width:50px; height:20px;">
<input type=button value="+" onclick="plus(answer)" style="width:50px; height:20px;">
<input type=button value="-" onclick="minus(answer)" style="width:50px; height:20px;">
<input type=button value="*" onclick="times(answer)" style="width:50px; height:20px;">
<input type=button value="/" onclick="devide(answer)" style="width:50px; height:20px;">
<input type=button value="=" onclick="calculation(answer, yeonsanstyle, firstnumber)" style="width:50px; height:20px;">
<input type="button" value="지우기" onclick="delnumber(answer)" style="width:50px; height:20px;">
</div>
</div>
<h4 style='font-family:"맑은 고딕", 돋움, 굴림, Arial, Helvetica, sans-serif;'>(소스 코드 181줄) <br>(+피곤함)</h4>
</div>
<script>
var answer = 0;
var yeonsanstyle = plus;
var firstnumber = 0;
function enter1(answer) {
var answer = document.getElementById("answertext").innerHTML;
var answer = answer + "1";
entercomplete(answer);
}
function enter2(answer) {
var answer = document.getElementById("answertext").innerHTML;
var answer = answer + "2";
entercomplete(answer);
}
function enter3(answer) {
var answer = document.getElementById("answertext").innerHTML;
var answer = answer + "3";
entercomplete(answer);
}
function enter4(answer) {
var answer = document.getElementById("answertext").innerHTML;
var answer = answer + "4";
entercomplete(answer);
}
function enter5(answer) {
var answer = document.getElementById("answertext").innerHTML;
var answer = answer + "5";
entercomplete(answer);
}
function enter6(answer) {
var answer = document.getElementById("answertext").innerHTML;
var answer = answer + "6";
entercomplete(answer);
}
function enter7(answer) {
var answer = document.getElementById("answertext").innerHTML;
var answer = answer + "7";
entercomplete(answer);
}
function enter8(answer) {
var answer = document.getElementById("answertext").innerHTML;
var answer = answer + "8";
entercomplete(answer);
}
function enter9(answer) {
var answer = document.getElementById("answertext").innerHTML;
var answer = answer + "9";
entercomplete(answer);
}
function enter0(answer) {
var answer = document.getElementById("answertext").innerHTML;
var answer = answer + "0";
entercomplete(answer);
}
function entercomplete(answer) {
document.getElementById("answertext").innerHTML = answer;
}
function delnumber(answer) {
var answer = document.getElementById("answertext").innerHTML;
var answer = answer.slice(0, -1);
entercomplete(answer);
}
function plus(answer) {
var answer = document.getElementById("answertext").innerHTML;
var firstnumber = answer;
var yeonsanstyle = "plus";
var answer = "0";
entercomplete(answer)
}
function minus(answer) {
var answer = document.getElementById("answertext").innerHTML;
var firstnumber = answer;
var yeonsanstyle = "minus";
var answer = "0";
entercomplete(answer)
}
function times(answer) {
var answer = document.getElementById("answertext").innerHTML;
var firstnumber = answer;
var yeonsanstyle = "times";
var answer = "0";
entercomplete(answer)
}
function devide(answer) {
var answer = document.getElementById("answertext").innerHTML;
var firstnumber = answer;
var yeonsanstyle = "devide";
var answer = "0";
entercomplete(answer)
}
function calculation(answer, yeonsanstyle, firstnumber) {
if(yeonsanstyle == "plus") {
var intanswer = answer * 1;
var intfirstnumber = firstnumber * 1;
var answer = intanswer + intfirstnumber;
var firstnumber = 0
entercomplete(answer)
}
if(yeonsanstyle == "minus") {
var intanswer = answer * 1;
var intfirstnumber = firstnumber * 1;
var answer = intanswer - intfirstnumber;
var firstnumber = 0
entercomplete(answer)
}
if(yeonsanstyle == "times") {
var intanswer = answer * 1;
var intfirstnumber = firstnumber * 1;
var answer = intanswer * intfirstnumber;
var firstnumber = 0
entercomplete(answer)
}
if(yeonsanstyle == "devide") {
var intanswer = answer * 1;
var intfirstnumber = firstnumber * 1;
if (intanswer == 0) {
window.alert("제수(나누는 수)가 0입니다.");
var answer = 0;
entercomplete(answer);
return;
}
var answer = intanswer / intfirstnumber;
var firstnumber = 0
entercomplete(answer)
}
}
</script>
</body>
</html>
어떤 게 문제일까요?
마지막에 답 출력이 안 됩니다.
(+스파게티 코드급이라서 더 간단하게 할 수 있는 방법이 있다면 알려주세요ㅜㅜ)
http://studyhtml.sfuhost.com/g-%EA%B3%84%EC%82%B0%EA%B8%B0-Javascript.html
댓글 6
onClick 속성에는 문제가 없으며, 변수 firstanswer ,yeonsanstyle 가 함수 안의 지역변수 내에서만 사용가능하다는점
초기 yeonsanstyle 부분이 함수를 가리킨다는점입니다...
yeonsanstyle 값은 무조건 문자열이어야 합니다.
코드가 총체적으로 난국이네요.... 함수 내에서도 var answer를 두 번씩 선언을 하시고...
인터넷에서 검색해가면서 겨우 만든 거라서...
도와주실 수 있나요?
코드가 너무... 많아서!
그냥 다시 새로 만들어보시는건 어떠신가요??
https://coding-factory.tistory.com/16 여기 코드 복붙해서 css 추가하고 하면 쉽게 해결할 수 있고 괜찮을 것 같아요
그리고 css랑 js는 따로 파일을 만들어서 작성하시면 훨씬 깔끔하고 보기 좋고 사이트 접속 속도도 빨라져요!
너무 복잡해서 그냥 처음부터 다시 짜기로 했습니다.
오히려 기분이 홀가분하네요.
코드가 너무 덕지덕지 합니다..(는 제생각)
일단 css,js 파일을 따로 만든후 html상에서 불러오는식으로 하면 훨-씬 깔끔해질듯 합니다.
보기에는 Onclick 속성에 문제가 있는듯 합니다