Thank you for taking time to read my post. I am copying here the link from codepen, hope you can see.
Continuing the discussion from JavaScript Building Blocks:
Hi @albertdan40!
I’ve had a look at your code, and I can see what you are trying to do. I’ve rewritten your HTML and JavaScript so that you get more of a correct result. The HTML is pretty similar, except that I’ve just updated the ID values (IDs have to be unique, and you shouldn’t have spaces in ID names):
<h3>👋 JavaScript Building Blocks!</h3>
<label for="choose date">Date of Departure</label>
<input type="date" id="departure-date">
<label>Date of Return</label>
<input type="date" id="return-date">
I’ve made a few changes to your JavaScript, and included comments to explain those changes:
const setDate = document.querySelector("#departure-date");
// your querySelector call was wrong — to select an ID you need a hash (#) in front of the value.
// also the ID value shouldn't have a space in it, so I added a dash (see the HTML)
const date = "2021-12-09";
// date values are stored in this ISO-format
let travelDate = "";
// for a value you want to change later on, use "let". "const" value are constants, so can never change
setDate.onchange = setTravelDate;
// your event handler property needs to be attached to an object that the event is fired on, in this case the form input from earlier.
// also, when invoking a named function in direct response to an even firing you shouldn't include the parentheses. So setTravelDate in this case, not setTravelDate(). Otherwise it fires immediately as soon the page loads
// last point - the click event is fired when you click on the element. What you really want is the change event, which fires once the value is changed. Hence I've changed this to the change event
function setTravelDate() {
console.log(setDate.value);
travelDate = setDate.value;
// Hint - to refer to an input's value, you need to use inputRef.value, not just inputRef
if (setDate.value === date) {
alert("Set Return Date")
} else {
alert("choose other dates");
}
}
Hope that helps.
By the way, you didn’t need to start a new discourse thread here — it would be perfectly fine for you to just reply to the previous one.
Thank you for this very clear explaination, I will continue to explore and learn JS
You are most welcome. Don’t hesitate to ask if you have any more questions.