• 목록
  • 아래로
  • 위로
  • 6
  • studyHTML
  • 조회 수 214

<!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

도토리묵

코드가 너무 덕지덕지 합니다..(는 제생각)

일단 css,js 파일을 따로 만든후 html상에서 불러오는식으로 하면 훨-씬 깔끔해질듯 합니다.

보기에는 Onclick 속성에 문제가 있는듯 합니다

 

comment menu
2018.11.06. 23:47

신고

"도토리묵님의 댓글"

이 댓글을 신고 하시겠습니까?

Hanam09 → 도토리묵
profile image

onClick 속성에는 문제가 없으며, 변수 firstanswer ,yeonsanstyle 가 함수 안의 지역변수 내에서만 사용가능하다는점

초기 yeonsanstyle 부분이 함수를 가리킨다는점입니다...

yeonsanstyle 값은 무조건 문자열이어야 합니다.

 

comment menu
2018.11.10. 20:39

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

title: 황금 서버 (30일)humit
profile image

코드가 총체적으로 난국이네요.... 함수 내에서도 var answer를 두 번씩 선언을 하시고...

comment menu
2018.11.07. 10:58

신고

"humit님의 댓글"

이 댓글을 신고 하시겠습니까?

studyHTML 작성자
profile image

인터넷에서 검색해가면서 겨우 만든 거라서...

도와주실 수 있나요?

comment menu
2018.11.07. 17:35

신고

"studyHTML님의 댓글"

이 댓글을 신고 하시겠습니까?

title: 에그joyful
profile image

코드가 너무... 많아서!

그냥 다시 새로 만들어보시는건 어떠신가요??

https://coding-factory.tistory.com/16 여기 코드 복붙해서 css 추가하고 하면 쉽게 해결할 수 있고 괜찮을 것 같아요

그리고 css랑 js는 따로 파일을 만들어서 작성하시면 훨씬 깔끔하고 보기 좋고 사이트 접속 속도도 빨라져요!

comment menu
2018.11.07. 19:09

신고

"joyful님의 댓글"

이 댓글을 신고 하시겠습니까?

studyHTML 작성자
profile image

너무 복잡해서 그냥 처음부터 다시 짜기로 했습니다.

오히려 기분이 홀가분하네요.

comment menu
2018.11.07. 19:12

신고

"studyHTML님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [작업 완료] 설 명절 맞이 서버 업데이트 안내 3 마스터 24.02.11.17:21 700
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 23.01.14.02:23 4374
공지 [필독] 질문하는 방법 17 마스터 18.02.23.03:09 4475
905 미디어위키 다시 시작하는데 위키에서 모듈 설정 해 보신 분 저좀 도와주세요 2 wikiowner 22.10.01.19:34 265
904 질문 2 poiega 22.09.03.23:35 148
903 FTP, FTPS, SFTP, WebDAV를 사용하지 않고 원격지 서버에 파일을 업로드하는 방법이 있을까요? 10 제르엘 22.09.01.14:33 219
902 xlsx 파일로 된 DB백업 데이터를 가져오기로 DB에 넣으려면 어떻게 해야할까요? 4 image 동파육 22.08.31.01:49 127
901 phpMyAdmin 접속시 mysqli_real_connect(): (HY000/1045): Access denied for user '000000'@'localhost' (using password: YES) 4 동파육 22.08.31.00:59 153
900 curl: (7) Failed to connect to localhost port 80: Connection refused 2 image 국내산라이츄 22.07.25.15:57 1569
899 Possible attack detected. This action has been logged. 패널접속하니 메세지가뜨네요 1 막시모 22.07.08.12:58 115
898 LTE 폰에서 3G 수신감도 확인방법?? 8 이니스프리 22.05.01.20:42 500
897 Vesa 마운트를 이용한 미니PC의 거치 4 이니스프리 22.04.07.12:23 274
896 우분투 20.04 cockpit 설치 안됨(해결) gunwook 22.04.01.22:20 113
895 브라우저 익스텐션이 있는 self hosted VPN으로 어떤 것이 있을까요? image 이니스프리 22.03.20.13:57 144
894 백업 파일도 디스크 용량에 포함인가요? 3 마당쇠15 22.03.10.10:52 166
893 DNS 관련 질문 (Netlify, CloudFlare) 5 밍원 22.02.14.15:24 202
892 나리야 빌더로 게임커뮤니티 운영 2 핫슈블로그 22.01.27.08:28 470
891 혹시 라이브러리나 개발자문서 한글 번역 정리 2 제목학원장 22.01.11.13:23 286
890 혹시 파이어베이스 사용하고 계시는 분 있으실까요? 공부에 도움될 만한 개발자 문서가 따로 있을까요? 3 제목학원장 22.01.07.13:57 244
889 호스팅 처음 해보는데 받은 주소를 쓰면 스터디 포 어스 페이지가 나옵니다. 7 yuyu 22.01.05.11:35 329
888 개인 홈페이지를 만들려고 하는데 보통 이미지들 어디서 얻으시나요? 다 만들어서 쓸 수는 없을 것 같고.. 2 yuyu 21.12.31.12:53 283
887 홈페에지가 구글에서 검색되도록 봇이 수집하게 설정했는데 API도 수집하도록 설정해도 되나요? 4 손가락개 21.12.06.03:45 278
886 sfuhost에서 사용 가능한 언어 6 모여라꿈동산 21.11.22.14:43 303