도와주세요

계산기를 만드는데 문제가!

studyHTML2018.11.06 23:06조회 수 57댓글 6

    • 글자 크기

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


    • 글자 크기
우분투의 crontab을 관리하는 노하우나 툴이 있을까요? (by 이니스프리) 국제전자센터에서 스마트폰 구입 괜찮을까요? (by 이니스프리)
  • 2018.11.6 23:47

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

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

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

     

  • @도토리묵
    2018.11.10 20:39

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

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

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

     

  • 2018.11.7 10:58

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

  • studyHTML글쓴이
    2018.11.7 17:35

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

    도와주실 수 있나요?

  • 2018.11.7 19:09

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

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

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

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

  • studyHTML글쓴이
    2018.11.7 19:12

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

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

댓글 달기

번호 제목 글쓴이 날짜 조회 수
공지 회선 문제 및 Project HOSTING에 관해25 마스터 2018.11.05 572
공지 회원 전용 페이지가 생겼습니다.12 마스터 2018.03.20 2028
공지 [필독] 질문하는 방법5 마스터 2018.02.23 505
488 원래 .co.kr 도메인과 .kr 도메인을 따로 따로 구입해야 하는건가요?5 맛스타 6시간 전 27
487 노트북이 너무 시끄럽습니다.10 네모 22시간 전 78
486 안녕하세요. AJAX로 페이지 긁어오는데에 보안오류가 생겼는데 조언을 구하고자 합니다.6 Hanam09 23시간 전 47
485 웹페이지의 상단 메뉴를 고정하는 플러그인에 관하여 질문 드립니다4 이니스프리 2018.11.19 73
484 mysql에서 select * from 테이블....2 홀민 2018.11.19 26
483 네이버 카페 대문에 입력할 이미지맵이 적용 안됩니다.ㅠㅜㅠㅜ 빙그래 2018.11.16 36
482 codepen은 저작권이 앖나요??9 joyful 2018.11.16 71
481 sfu호스팅 결제오류..?2 nx_OP 2018.11.15 40
480 라이믹스 로그인 버튼3 title: 연필Nginx 2018.11.15 40
479 RSS 게시판 업데이터 사용 관련 질문3 title: KS마크도토리묵 2018.11.15 32
478 네이비즘에서 측정한 스포어 서버시간의 오차 관련 질문 드립니다 (서버시간 측정 관련)4 이니스프리 2018.11.14 61
477 라이믹스 도와주세요!1 title: 연필Nginx 2018.11.14 36
476 웹 개발 언어를 만들어보려고 합니다1 Blessed_Umbrella 2018.11.13 29
475 커뮤니티 사이트를 제작해보려고 합니다3 ndbdbbn 2018.11.11 65
474 Amazon Route 53 DNS 셋팅관련7 협스 2018.11.11 45
473 미디어위키 flow확장기능 오류가 발생했습니다.1 AA 2018.11.10 29
472 안녕하세요!!!.. 왕초보 웹사이트 제작 관련 질문 드립니다.8 그냥왕초보일기 2018.11.09 71
471 컴퓨터가 안꺼져요11 title: 다꼬리허니버터뚠뚜니라이츄 2018.11.08 74
470 우분투의 crontab을 관리하는 노하우나 툴이 있을까요?14 이니스프리 2018.11.07 89
계산기를 만드는데 문제가!6 studyHTML 2018.11.06 57
이전 1 2 3 4 5 6 7 8 9 10... 25다음
첨부 (0)
서버에 요청 중입니다. 잠시만 기다려 주십시오...