Member Avatar for toldav

I need help in troubleshoot my code for reason the if statement is not working.
any help please Im new into Javascript/

<!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Grade Calculator</title>
            <style type="text/css">
                body {
                    font-family: Arial, sans-serif;
                    text-align: center;
                }
                form {
                    width: 300px;
                    margin: 0 auto;
                    text-align: right;
                }
                .h-line {
                    background-color: black;
                    margin: 2px auto;
                    width: 100%;
                    height: 2px;
                }
                input {
                    text-align: right;
                }
            </style>
        </head>
        <body>
            <h1>Grade Calculator</h1>
            <p>Enter only whole numbers.</p>
            <form name="Grade Calculator" id="form">
                <p>
                    <label for="test1">Test #1 Grade:</label>
                    <input type="text" id="test1" value="" name="Test #1" size="3"
                    maxlength="3">
                </p>
                
                <p class="h-line"></p>
                <p>
                    <label for="final-grade">Final Grade (Letter Grade):</label>
                    <input type="text" name="Final Grade" id="final-grade" value=""
                            size="7" >
                </p>
                <p>
                    <input type="button" value="Calculate" onclick="calcGrade();">
                    <input type="reset" value="Reset">
                </p>
            </form>
        <script type="text/javascript">
            function calcGrade() {
                var form = document.getElementById("form");
                var finalGrade = document.getElementById("final-grade");
                var input;
                var grade;
               
                /*
                        Only whole numbers allowed and no values above 100 or below
                    0 accepted. Any input value over 100 will be reset to 100. Any
                    input value below 0 will be reset to 0.
     
                        Because parseInt() is used, any number to the right of the
                    decimal point is ignored. The program will update the input
                    fields to show that the tenth's place was dropped.
     
                        To reduce confusion, the user is told to enter only whole
                    numbers and the final grade number is rounded.
                */
                
                input = form.elements.value;
                if (parseInt(input, 10)) {
                    input = parseInt(input, 10);
                    form.elements.value = input;
                    if (input <= 100 && input >= 0) {
                        grade = input;
                    } else {
                        if (input > 100) {
                            grade = 100;
                            form.elements.value = "100";
                        } else {
                            if (input < 0) {
                                grade = 0;
                                form.elements.value = "0";
                            }
                        }
                    }
                } 
                else {
                    grade = 0;
                    form.elements.value = "0";
                }    
                         
                grade = Math.round((grade * 0.2));
     
                if (grade < 60) {
                    finalGrade.value = " F";
                    return;
                }
                if (grade >= 60 && grade < 70) {
                    finalGrade.value = " D";
                    return;
                }
                if (grade >= 70 && grade < 80) {
                    finalGrade.value = " C";
                    return;
                }
                if (grade >= 80 && grade < 90) {
                    finalGrade.value = " B";
                    return;
                }
                if (grade >= 90) {
                    finalGrade.value = " A";
                }  
            }
        </script>
        </body>
    </html>
  • 3 Contributors
  • 2 Replies
  • 528 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by Troy III
Member Avatar for stbuchok

which if statement? I'm assuming the one at line 69.

What is the value of input?

do alert(input); between lines 69 and 68

Member Avatar for Troy III

What do you mean by: form.elements.value = input; (me confused!?!) or, which element exactly?

And you won't need this: "grade = Math.round((grade * 0.2));" unless you are interested to return F on all inputs from 100 down to 0, (at least not with the route taken).

Anyway, you can try this :
(it should work if I understood the task correctly; and for a better user experience you might want to split your function in two )

function calcGrade() {
                var form = document.getElementById("form");
                var finalGrade = document.getElementById("final-grade");
                var field = form.elements['test1'];     
		var input = field.value, grade, max = 100, min = 0;

		if(input = parseInt(input, 10)){
			field.value = 
			grade = input > max ? grade = max : 
				input < min ? grade = min : 
				input;
			finalGrade.value =
				(grade < 60) ? "F" :
				(grade < 70) ? "D" :
				(grade < 80) ? "C" :
				(grade < 90) ? "B" :
				(grade <100) ? "A" : "!";
	            }
	    }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.