[JS] 연습문제 : onclick 이용하여 계산하기, 성적결과 내기

계산 해주는 거 만들기

<body>
    <input type="text" id="val1">
    <select id="oper">
        <option disabled selected>사칙연산 선택</option>
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input type="text" id="val2">
    =
    <input type="text" id="result" disabled>
    <button onclick="calc()">계산하기</button>

    <script>
        function calc(){
            const val1 = document.querySelector('#val1');
            const val2 = document.querySelector('#val2');
            const oper = document.querySelector('#oper');
            const result = document.querySelector('#result');

            const value1 =parseInt(val1.value);
            const value2 =parseInt(val2.value);

            let calcResult;

            if(oper.value==="+"){
                calcResult = value1 + value2;
            } else if(oper.value==="-") {
                calcResult = value1 - value2;
            } else if(oper.value==="*") {
                calcResult = value1 * value2;
            } else {
                calcResult = value1 / value2;
            }
            result.value = calcResult;
        }
    </script>
</body>

국어,영어 성적을 입력받아 평균이 90 이상이면 우수,
70 이상이면 통과, 미만이면 재시험

<body>
    <input type="number" id="국어" placeholder="국어점수" min="0" max="100" required>
    <input type="number" id="영어" placeholder="영어점수" min="0" max="100" required>
    <button onclick="점수()">결과</button>
    <input type="text" id="결과" placeholder="결과" disabled>
    <script>
        function 점수(){
            const 국어점수=document.querySelector('#국어').value;
            const 영어점수=document.querySelector('#영어').value;
            const 결과=document.querySelector('#결과');

            const 평균 = (parseInt(국어점수) + parseInt(영어점수)) /2;
            console.log(평균);
            
            if(평균>=90){
                alert("우수")
            } else if(평균>=70){
                alert("통과")
            } else{
                alert("재시험")
            }

            }
    </script>
</body>

쌤이한거

<body>
    <div>
        <div>
            <label for="kor"></label>
            <input type="number" id="국어" placeholder="국어점수" min="0" max="100" required>
        </div>
        <div>
            <label for="eng"></label>
            <input type="number" id="영어" placeholder="영어점수" min="0" max="100" required>
        </div>
        <button onclick="점수()">결과</button>
    </div>
    <script>
        function 점수(){
            const korElem = document.querySelector('#국어');
            const engElem = document.querySelector('#영어');
            const kor = parseInt(korElem.value);
            const eng = parseInt(engElem.value);
            const avg = (kor+eng)/2;

            if(kor,eng>100){
                alert('잘못입력');
                return; //함수종료
            }

            if(avg>=90){
                alert("우수")
            } else if(avg>=70){
                alert("통과")
            } else{
                alert("재시험")
            }
        }
    </script>
</body>

티스토리툴바