Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Why isn't this code working?

    I'm trying to make the average text box change colours depending on the average. If avg is 50 or below red if 50 or above green. Any advice?

    Thanks

    Code:
    <HTML>
    <HEAD>
    <TITLE> Grade Calculator </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    function updateForm(whichInput, max) {
    if (isNaN(whichInput.value) || whichInput.value < 0 || whichInput.value > max)
    {
    alert("The number must be between 0 and " + max);
    whichInput.value = 0; // reset the illegal input value
    whichInput.focus(); // return the cursor to the illegal input
    } else {
    document.Grades.average.value = computeAverage(parseFloat(document.Grades.lessons.value), parseFloat(document.Grades.labs.value),
    parseFloat(document.Grades.midterm.value),
    parseFloat(document.Grades.final.value),
    parseFloat(document.Grades.project.value));
    }
    }
    function computeAverage(lessons, labs, midterm, final, project)
    {
    var average = (lessons + labs + midterm + final + project);
    return average;
    }
    
    var averageColour = function(average)
    {
    	if(average < 50){
    		average.style.color = 'red';
    	}
    	else if(average > 50){
    		average.style.color = 'green';
    	}
    return averageColour;
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    Enter your individual grades in the boxes below, and your final average will be automatically computed and displayed.
    <HR>
    <FORM NAME="Grades">
    <TABLE>
    <TR>
    <TD> Enter your lesson average (out of 5):
    <TD> <INPUT TYPE="Text" NAME="lessons" SIZE=5 VALUE=0
    ONCHANGE="updateForm(document.Grades.lessons, 5);">
    </TR>
    <TR>
    <TD> Enter your lab average (out of 10):
    <TD> <INPUT TYPE="Text" NAME="labs" SIZE=5 VALUE=0
    ONCHANGE="updateForm(document.Grades.labs, 10);">
    </TR>
    <TR>
    <TD> Enter your score on Midterm test (out of 25):
    <TD> <INPUT TYPE="Text" NAME="midterm" SIZE=5 VALUE=0
    ONCHANGE="updateForm(document.Grades.midterm, 25);">
    </TR>
    <TR>
    <TD> Enter your score on Final Exam (out of 35):
    <TD> <INPUT TYPE="Text" NAME="final" SIZE=5 VALUE=0
    ONCHANGE="updateForm(document.Grades.final, 35);">
    </TR>
    <TR>
    <TD> Enter your score on the Project (out of 25):
    <TD> <INPUT TYPE="Text" NAME="project" SIZE=5 VALUE=0
    ONCHANGE="updateForm(document.Grades.project, 25);">
    </TR>
    <TR> <TD COLSPAN=2> <HR> </TR>
    <TR>
    <TD> Your average for the course is:
    <TD> <INPUT TYPE="Text" NAME="average" SIZE=5 VALUE=0
    ONFOCUS="averageColour(average)">
    </TR>
    </TABLE>
    
    </FORM>
    </BODY>
    </HTML>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    I seem to remember seeing an occasional web page coded like that back when I started creating web pages in 2000. Not many though as apparently whatever languages they were written in had been replaced several years earlier.

    HTML 4 became a standard for HTML back in 1997 and HTML 5 should become a standard in the next year or so. You might consider updating the HTML to use one of those versions. You could then use modern JavaScript to interact with the page to do what you want in place of the historical version for Netscape 3 browser that you appear to be trying to use with more modern browsers.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,445
    Thanks
    23
    Thanked 630 Times in 629 Posts
    To help you trouble shot:
    If you put this as the first two things in your first function
    Code:
    function updateform(whichinput, max) {alert(whichinput);alert(max);
    You will see whichinput gives you [object HTMLInputElement] and not what you wanted. So that's the first problem. You want to send the value entered in this parameter. Answer, use this.value.
    Code:
    onchange="updateform(this.value, 5);"
    I would erase what the use inputted and set the focus to it. MHO.

    Good luck testing. We are here if you run into any other problems.

    Oh yeah, try this as the first part of the HTML code:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title> grade calculator </title>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •