Local Variable to Global Variable in JavaScript

Question

I am developing a web page where the Months will be calculated after entering the Date from the Input Field.

I want to take the value of "diffMonthsGlobe" to another function where this calculated value is going to the database.

But as I have seen few answers in StackOverflow and try to do the same but still in my case it is not possible

 var diffMonthsGlobe;

function getValue() {
  // Getting Values......

  const startDate = document.getElementById("startDate").value;
  const endDate = document.getElementById("endDate").value;

  // Calculating Time Period.......

  const date1 = new Date(endDate);
  const date2 = new Date(startDate);

  var diffMonth = (date2.getTime() - date1.getTime()) / 1000;
  diffMonth /= 60 * 60 * 24 * 7 * 4;

  diffMonths = Math.abs(Math.round(diffMonth));

  diffMonthsGlobe = diffMonths;
  
  // Printing Values......

  console.log(startDate);
  console.log(endDate);
  console.log(diffMonths + " Months");
  
  return diffMonthsGlobe;
}

getValue();
console.log(diffMonthsGlobe + " Months");

<input type="date" class="form-control" placeholder="Start Date *" name="startDate" id="startDate" required onchange="getValue()" />

<input type="date" class="form-control" placeholder="End Date *" name="endDate" id="endDate" required onchange="getValue()" />

why is this tagged css and php? Also, don't use `document.write (startDate);` unless you understand the implications of doing so - use `console.log` for debugging — Bravo, Aug 25 '21 at 05:16
`take the value of "diffMonthsGlobe" to another function ` ... so, you'd call the function in `getValue` — Bravo, Aug 25 '21 at 05:20
1. Have default values in the calenders and/or 2. do not call getValue() until after user has selected. — mplungjan, Aug 25 '21 at 05:30

score 0 · Answer 1 · answered Aug 25 '21 at 05:39

Use a form so the required works
Use the submit event to get the value and send to server

const getValue = function() {
  // Getting Values......

  const startDate = document.getElementById("startDate").value;
  const endDate = document.getElementById("endDate").value;

  // Calculating Time Period.......

  const date1 = new Date(endDate);
  const date2 = new Date(startDate);

  var diffMonth = (date2.getTime() - date1.getTime()) / 1000;
  diffMonth /= 60 * 60 * 24 * 7 * 4;

  diffMonths = Math.abs(Math.round(diffMonth));

  diffMonthsGlobe = diffMonths;

  // Printing Values......

  console.log(startDate);
  console.log(endDate);

  return diffMonthsGlobe;
}

window.addEventListener("load", function() { // page load
  document.getElementById("myForm").addEventListener("submit", function(e) {
    e.preventDefault(); // stop submission
    const monthDiff = getValue();
    console.log(monthDiff + " Months");
    // here you can fetch or otherwisde ajax to server
  })
})

<form id="myForm">
  <input type="date" class="form-control" placeholder="Start Date *" name="startDate" id="startDate" required />

  <input type="date" class="form-control" placeholder="End Date *" name="endDate" id="endDate" required />

  <input type="submit" />
</form>

Local Variable to Global Variable in JavaScript

1 Answers1