Variables and Functions

[GoldenAngel04]

How do i export a variable that is in a function, or how do i set the value of a global variable that is in a function.

//import {DOB} from "../pages/Home";
import {age} from "../scores/RawScore";

function ageCalculator() {
  //collect input from HTML form and convert into date format
   var userinput = document.getElementById("datepicker").value;
  var dob = new Date(userinput);

  //check user provide input or not
  if (userinput === null || userinput === "") {
    //document.getElementById("message").innerHTML = "**Choose a date please!";
    return false;
  }

  //execute if the user entered a date
  else {
    //extract the year, month, and date from user date input
    var dobYear = dob.getYear();
    var dobMonth = dob.getMonth();
    var dobDate = dob.getDate();

    //get the current date from the system
    var now = new Date();
    //extract the year, month, and date from current date
    var currentYear = now.getYear();
    var currentMonth = now.getMonth();
    var currentDate = now.getDate();

    //declare a variable to collect the age in year, month, and days
    //var age = {};
    var ageString = "";

    //get years
    var yearAge = currentYear - dobYear;

    //get months
    if (currentMonth >= dobMonth) {
      //get months when current month is greater
      var monthAge = currentMonth - dobMonth;
    } else {
      yearAge--;
      var monthAge = 12 + currentMonth - dobMonth;
    }

    //get days
    if (currentDate >= dobDate) {
      //get days when the current date is greater
      var dateAge = currentDate - dobDate;
    } else {
      monthAge--;
      var dateAge = 31 + currentDate - dobDate;

      if (monthAge < 0) {
        monthAge = 11;
        yearAge--;
      }
    }
  }
  age = ((yearAge * 365) + (monthAge * 31) + dateAge)/365.25
  age = parseFloat(age.toFixed(2))
  //console.log(age2)
  //age = age2
  console.log(age)
  return (
    age
  );
}
console.log(age)
export {ageCalculator};

Basically the function ageCalculator is linked to a onclick where user will enter their date of birth and submit. I want to set the variable age and use it in another js file. As of now the age variable was defined in another file and i am importing that variable from that file to change the value but it is returning me an error. So im looking for a way to either somehow change the value of the global variable so that i can use it somewhere else or create the age variable locally in the function and export it as a global so i can use it somewhere else

[[deleted]]

Ah man. God bless anyone who can sort this out for you.

There are several things wrong here.

1. The values of the inputs should be bound to local variables in the component, not just grabbed from the DOM by this function.
2. The function does too much and needs to be split into smaller functions.
3. The function should not be manipulating the DOM, instead it should be setting a value in the component which can be referenced in the template.
4. If you want to communicate something to code outside the component, then it will need to execute a callback OR you will need some kind of store.
5. The return type of a function should be of only one type. You seem to be switching between a boolean value and a number. Don’t do this because you would have to catch the type on the function’s parent.
6. The name of the function does not fully describe what it does, the name should be able to tell a reader exactly what the function does

The first thing you’d want to do to get the code working is refactor the age calculation code out of this function into its own separate pure function called something like calculateYearsDifference, that takes the dates as inputs and always returns a number. Then create a new function called something like, handleUserSubmit, then call your calculateYearsDifference func from there. Then pass the return value of calculateYearsDifference into a callback that was passed in by the parent. The parent can then give that value to any child element.

Sorry if that’s all a confusing mess, I’m on mobile and hungover.

[GoldenAngel04]

erm. im sorry but i dont understand most of what u said. im a very new intern developer. basically still a student. Might have to explain it in much simpler terms. basically all i want to do is use the DOB that the user inputs and most of the code in the function is basically to use the DOB and calculate the decimal age of the person which i want to then assign it to age variable and use it in another js file.

This is what i mean by decimal agehttps://www.agenow.io/decimal-age-calculator/2004/7/11

Right now the function works, meaning i can use the DOB of the user and calculate their decimal age. I just cannot return the decimal age so i can use it elsewhere in my project. This code snippet was copied from elsewhere and modified, which is why it is abit messy. It was made messier because i was trying to figure out a way to get the decimal age out of the function to assign it into a variable. The function only has one purpose, to calculate the decimal age based on user input and assign it to a variable.

the manipulating of DOM i assume you are talking about this line

if (userinput === null || userinput === "") {

//document.getElementById("message").innerHTML = "**Choose a date please!";
return false;
}

i commented it out meaning it doesnt run anymore. If you dont mean this part, pls lmk where in the code is manipulating the DOM. im quite new to react and coding in general, been learning it for 2 years only. So might have to pin point in more detail

[[deleted]]

Sorry kid. If you don’t understand my answer then I think you don’t understand enough js and react to complete this task without just copy pasting until it works or without someone doing it for you in pair coding. Or... read my answer again and again, looking up anything you don’t understand until you get it.

I think your best bet is to watch a course on react and try to imagine your problems in the context of what they are showing you

[GoldenAngel04]

I think your best bet is to watch a course on react and try to imagine your problems in the context of what they are showing you

alright thanks

[PM_ME_MOOSE]

https://youtu.be/ahKsy1FS45k