I created a search similar to the one on booking that I want to integrate into the site and I get the following error... after choosing a checkin, checkout, select the number of rooms, adults and children respectively their age and press the button the search throws the following error in the console
Cannot read properties of null (reading 'value')
And I can't figure out where I'm going wrong. I am attaching the code below.
HTML
<form id="booking-search-form" action="https://www.booking.com/searchresults.ro.html" method="get"
target="_blank" style="display: flex; justify-content: center;">
<div class="container">
<div class="hakolal-search-row-bk">
<div class="col-sm hakolal-search-conf">
<input type="date" id="checkin" name="checkin">
</div>
<div class="col-sm hakolal-search-conf">
<input type="date" id="checkout" name="checkout">
</div>
<div class="col-sm hakolal-search-conf">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Number of guests</button>
<div id="content" class="content dropdown-menu" aria-labelledby="dropdownMenu1">
<div class="list">
<label for="rooms" class="list">Choose how many rooms</label>
<input type="number" class="list quantity" value="0" />
</div>
<div class="list">
<label for="adults" class="list">Choose the number of adults</label>
<input type="number" class="list quantity" value="1" />
</div>
<div class="list" id="children-list">
<label for="children" class="list">Choose the number of children</label>
<input type="number" class="list quantity" value="0" />
<div id="children-ages"></div>
</div>
</div>
</div>
</div>
<div class="col-sm hakolal-search-conf">
<button type="submit" class="btn btn-info hakolal-search-bk">Search</button>
</div>
</div>
</div>
</form>
JavaScript:
const form = document.getElementById("booking-search-form");
console.log("Formular:", form);
// Add event listener to children quantity input
const childrenQuantityInput = document.querySelector("#children-list input.quantity");
childrenQuantityInput.addEventListener("change", () => {
const childrenAgesDiv = document.querySelector("#children-ages");
childrenAgesDiv.innerHTML = ""; // Clear children ages list
// Add input for each child age
for (let i = 1; i <= childrenQuantityInput.value; i++) {
const label = document.createElement("label");
label.setAttribute("for", `child-${i}-age`);
label.classList.add("list");
label.innerText = `Child ${i} age:`;
const input = document.createElement("input");
input.setAttribute("id", `child-${i}-age`);
input.setAttribute("name", `age-${i}`);
input.setAttribute("type", "number");
input.setAttribute("min", "0");
input.setAttribute("max", "17");
input.classList.add("list");
input.value = "0";
const div = document.createElement("div");
div.appendChild(label);
div.appendChild(input);
childrenAgesDiv.appendChild(div);
}
});
console.log("Input numar copii:", childrenQuantityInput);
const checkinInput = document.getElementById("checkin");
const checkoutInput = document.getElementById("checkout");
form.addEventListener("submit", (event) => {
event.preventDefault();
console.log(checkinInput); // check if element exists
console.log(checkoutInput); // check if element exists
const checkinValue = checkinInput.value;
console.log(checkinValue); // display selected value in console log
const checkoutValue = checkoutInput.value;
console.log(checkoutValue); // display selected value in console log
if (!checkinValue || !checkoutValue) {
alert("Please enter check-in and check-out dates");
return;
}
// check if is selectet an room
const numberOfRooms = document.querySelector("#content input:nth-of-type(1)").value;
if (numberOfRooms < 1) {
alert("Please select at least one room");
return;
}
console.log("Numarul de camere selectat:", numberOfRooms);
// check if is selected an adult
const numberOfAdults = document.querySelector("#adults-list input.list.quantity").value;
if (numberOfAdults < 1) {
alert("Please select at least one adult");
return;
}
console.log("Numarul de adulti:", numberOfAdults); // Valoarea nu se adauga, nu afiseaza nimic in consola
const numberOfChildren = document.querySelector("#children-list input.list.quantity").value;
const childrenAges = Array.from(document.querySelectorAll("#children-ages input"))
.map((input) => input.value)
.join(",");
for (let i = 1; i <= numberOfChildren; i++) {
const childAgeInput = document.querySelector(`#child-${i}-age`);
if (childAgeInput.value < 1) {
alert(`Please enter a valid age for child ${i}`);
return;
}
}
console.log("Numarul de copii:", numberOfChildren); // Valoarea nu se adauga, nu afiseaza nimic in consola
console.log("Varsta copiilor:", childrenAges); // Valoarea nu se adauga, nu se afiseaza nimic in consola
// Value of parameter ss is harcoded
// ss parameter represent a location
const url =
`https://www.booking.com/searchresults.ro.html?ss=Romania&checkin=${checkinValue}&checkout=${checkoutValue}&nr_rooms=${numberOfRooms}&nr_adults=${numberOfAdults}&nr_children=${numberOfChildren}&group_children=${childrenAges}`;
window.open(url, "_blank");
});
I tend to think that the problem is that the dropdown does not take the value from the number of rooms, adults and children of the respective age for each. But I'm not really sure.
The code, after selecting all the values in the form, creates a URL and makes a search in booking based on the parameters sent by the form.
Can you help me solve the problem? I can't figure out where I'm going wrong.
the error you receiving its because its trying to read a value of a html element that does'nt exist
this issue is caused by this line:
const numberOfAdults = document.querySelector("#adults-list input.list.quantity").value;
adults-list element doesn't exist in the HTML
you can add the element in a div container
<div class="list" id="adults-list">
<label for="adults" class="list">Choose the number of adults</label>
<input type="number" class="list quantity" value="1" />
</div>