Adding Methods and functions to JavaScript code

JavaScript
1

Hi I have the code to loop through an array and display a child’s grade and age on a HTML table according to their birthdate.

I want to give this code a method but when I add in my code function determineGrade (birthDate) { } it breaks my code and it doesn’t work. where do I add this code or is this the proper code to add a method?

<!Doctype html>
<html>
<!--Header-->
<head>
	<style>
		td{
			padding-top: 3px;
			padding-bottom: 3px;
			padding-right: 20px;
			padding-left: 20px;
		}
	</style>
	
    <title>JavaScript Assignment 4- Jasmine Lusty</title>
    <!--can contain javascript imports but page javascipt should be at the bottom of the body-->
</head>
<!--Body-->
<body>
<!-- Grade Html -->
	<h4>Grades!</h4>
    <table>
        <tbody>
            <tr id="Grade 1">
                <td>Grade 1</td>
                <td>6</td>
            </tr>
            <tr id="Grade 2">
                <td>Grade 2</td>
                <td>7</td>
            </tr>
            <tr id="Grade 3">
                <td>Grade 3</td>
                <td>8</td>
            </tr>
            <tr id="Grade 4">
                <td>Grade 4</td>
                <td>9</td>
            </tr>
            <tr id="Grade 5">
                <td>Grade 5</td>
                <td>10</td>
            </tr>
            <tr id="Grade 6">
                <td>Grade 6</td>
                <td>11</td>
            </tr>
        </tbody>
    </table>
	<br>

    <script type="text/javascript">

        //Birthdate check code.
        var birthDate = new Date(2011, 6, 18, 7, 33);
        var today = new Date()

        var yearDifference = today.getFullYear() - birthDate.getFullYear();
 

        var gradeYears = [['Grade 1', 6], ['Grade 2', 7], ['Grade 3', 8], ['Grade 4', 9], ['Grade 5', 10], ['Grade 6', 11]];


		var grade = "";
        var counter = 0;
    
		while(counter < 6 && grade == "")
        {
            var currentValue = gradeYears[counter];
            
            if (currentValue[1] == yearDifference)
            {

                grade = currentValue[0];
            }

            counter += 1; 
        }
        var gradeRow = document.getElementById(grade);
        gradeRow.style.backgroundColor = "#90EE90";

    </script>
    <br>


</body>
</html>

This picture is what is supposed to display, and what this code does display before I add any methods.
Screen Shot 2020-04-24 at 7.22.06 PM

Thank you

2

Ok, so is the confusion about the use of functions?

Not sure if the following will help.

You want the function to take some data and return something useful

function determineGrade (birthdate) {
    code here
    ...
    ...
    return something useful;
}

var grade = determineGrade(birthDate) // grade gets what the function returns
// do something with grade here

A simple working example

function addFive ( num ) {
    var result = num + 5;
    return result
}

console.log(addFive(10)) // outputs 15

or a bit closer to your task

function getIdName ( index ) {
    var idNames = ['item1', 'item2', 'item3', 'item4', 'item5'];
    return idNames[index];
}

var idName = getIdName(3) // item4
var item = document.getElementById(idName);
item.style.color = 'red';

You already have the working code, now it is figuring out what part of the code you need to wrap the function around (A clue, most of it:)), what you need to pass in, what you need to return and what you then do with that returned value.

Hope that isn’t more confusing:)

This seems to be a pretty good guide to function basics
function-basics

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.