- 6
- studyHTML
- 조회 수 218
<!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
![comment menu](/modules/board/skins/comely_board/images/icn_more.png)
![profile image](/files/member_extra_info/profile_image/840/162/162840.png?t=1497669415)
onClick 속성에는 문제가 없으며, 변수 firstanswer ,yeonsanstyle 가 함수 안의 지역변수 내에서만 사용가능하다는점
초기 yeonsanstyle 부분이 함수를 가리킨다는점입니다...
yeonsanstyle 값은 무조건 문자열이어야 합니다.
![comment menu](/modules/board/skins/comely_board/images/icn_more.png)
![title : 황금 서버 (30일) title: 황금 서버 (30일)](https://sfuhost.com/./files/iconshop/33055af84f02ddedb19db038cdae0d2f.gif)
![profile image](/files/member_extra_info/profile_image/569/001/1569.png?t=1527385219)
코드가 총체적으로 난국이네요.... 함수 내에서도 var answer를 두 번씩 선언을 하시고...
![comment menu](/modules/board/skins/comely_board/images/icn_more.png)
![profile image](/files/member_extra_info/profile_image/216/446/446216.jpg?t=1539404627)
인터넷에서 검색해가면서 겨우 만든 거라서...
도와주실 수 있나요?
![comment menu](/modules/board/skins/comely_board/images/icn_more.png)
![title : 에그 title: 에그](https://sfuhost.com/./files/iconshop/738f0295450a95a257cce1f403834520.gif)
![profile image](/files/member_extra_info/profile_image/136/324/324136.jpg?t=1535776672)
코드가 너무... 많아서!
그냥 다시 새로 만들어보시는건 어떠신가요??
https://coding-factory.tistory.com/16 여기 코드 복붙해서 css 추가하고 하면 쉽게 해결할 수 있고 괜찮을 것 같아요
그리고 css랑 js는 따로 파일을 만들어서 작성하시면 훨씬 깔끔하고 보기 좋고 사이트 접속 속도도 빨라져요!
![comment menu](/modules/board/skins/comely_board/images/icn_more.png)
![profile image](/files/member_extra_info/profile_image/216/446/446216.jpg?t=1539404627)
너무 복잡해서 그냥 처음부터 다시 짜기로 했습니다.
오히려 기분이 홀가분하네요.
![comment menu](/modules/board/skins/comely_board/images/icn_more.png)
코드가 너무 덕지덕지 합니다..(는 제생각)
일단 css,js 파일을 따로 만든후 html상에서 불러오는식으로 하면 훨-씬 깔끔해질듯 합니다.
보기에는 Onclick 속성에 문제가 있는듯 합니다