Hi all. I’m trying to build a calculator that works out when certain documents will expire based on the issue date of the document provided by the user. Currently in my code it is set to do this by adding 90 days to the issue date.
A second thing that also needs to be calculated is when users should reapply for the document. So if a document expires on the 3rd of May 2022 they should reapply 10 days before the expiry date.
The problem that I don’t know how to fix is that the subtraction is taking place from the current date instead of the from the expiry date.
Any advice would be greatly appreciated.
Please find the full code below and in the codepen: https://codepen.io/Nicole850206/pen/bGjRXJa
<!DOCTYPE html>
<html>
<body>
<p>Select a date: <input type="date" id="issueDate"></p>
<button onclick="addDays()">Add 90 days</button>
<button onclick="subtractDays()">Subtract 10 days</button>
<div id="expiryDate"></div>
<div id="applyDate"></div>
<script>
function addDays() {
var date = new Date(document.getElementById("issueDate").value);
date.setDate(date.getDate() + 90);
document.getElementById("expiryDate").innerHTML = date;
}
function subtractDays() {
var expiryDate = document.getElementById("expiryDate").value;
var date = expiryDate ? new Date(expiryDate) : new Date();
date.setDate(date.getDate() - 10);
document.getElementById("applyDate").innerHTML = date;
}
</script>
</body>
</html>
Just to clarify what you want:
User selects a date.
User can then click the Add 6 days button to display a date that is 90 days from the selected date. Not sure why the button is not Add 90 days, but that is for you to explain.
User can also click the Subtract 3 days button which should display another date that is 10 days earlier than the date generated from clicking on the Add 6 days button. Again, not sure why the button is called Subtract 3 days if you are taking 10 days off.
With your current code, a user can select a date and click the first button and it will correctly displays a date that is that is 90 days from the date selected. If the user then clicks the second button, the date is always going to be 10 days earlier than the current date because the variable expiryDate in your subtractDays function will always be undefined, hence causing the date variable to be assigned new Date().
Why? Because div elements do not have value properties. They do not have innerTHML, innerText, and textContent properties you could reference instead.
Personally, I would have a single button that generates both dates that need to be displayed instead of two separate buttons. That way, you only create 90 days date and then use it to create the - 10 days date and then display them at the same time.
Hi
I just forgot to change the 6 to 90 and the 3 to 10 sorry about that 
The way you understand it is correct. I did originally only want one button but the only way I could think of it to work was with the way I used above, which I understand now can’t work 
The logic I used with a single button is:
- Get value of
input
- Create a variable to hold a new Date that is either the current date (if the input’s value is undefined (nothing selected)), or a date of the same value of the input’s contents.
- Set the date variable to be 90 days more than it is.
- Set the innerHTML of the the div with id=“expiryDate” to be this date.
- Set the date variable to be 10 days less than it currently is.
- Set the innerHTML of the the div with id=“applyDate” to be this date.
That is it. There is a single function with 6 lines of code that displays the two dates with a single click of a button.