Javascript - click a button until an element gets a certain value (no while loop)
I am currently trying to automate a date picker using JavaScript. The date picker contains a header element that displays the current month and year.
What I am trying to achieve is a way to continuously press the back date picker until the month and year in the header matches the month and year of the given date value.
At first I thought it could be done with a simple while loop, but since while the loops delay all other JavaScript code actions on the page until the loop is complete (and the back button requires JS to navigate ), the attempt will simply block the page completely.
Here's the (non-working) code I wrote:
(function() {
function checkDatePickerHeader(selector) {
var date = document.querySelector(selector).innerText;
date = new Date(date);
return date;
}
var datePickerHeaderSelector = "#body > div.daterangepicker.dropdown-menu.opensleft.show-calendar > div.calendar.left > div > table > thead > tr:nth-child(1) > th.month";
var datePickerBackButton = document.querySelector("#body > div.daterangepicker.dropdown-menu.opensleft.show-calendar > div.calendar.left > div > table > thead > tr:nth-child(1) > th.prev.available");
var targetDate = new Date("2016-12-01");
var datePickerDate;
datePickerDate = checkDatePickerHeader(datePickerHeaderSelector);
// click until correct year
while (targetDate.getFullYear() < datePickerDate.getFullYear()) {
datePickerBackButton.click();
// update datePickerDate with new header value
datePickerDate = checkDatePickerHeader(datePickerHeaderSelector);
}
// then click until correct month
while (targetDate.getMonth() < datePickerDate.getMonth()) {
datePickerBackButton.click();
datePickerDate = checkDatePickerHeader(datePickerHeaderSelector);
}
})();
What I found after researching is that re-working the while (s) loop into a function and then calling said function with a timeout might work, but I'm not sure how to repeatedly call the function until the condition has been met.
source to share
After some advice from friends and a little tinkering, I solved the problem! setInterval
was really what I needed to use in this case. Here's the working code:
(function() {
function checkDatePickerHeader(selector) {
var date = document.querySelector(selector).innerText;
date = new Date(date);
return date;
}
// clear then set back button again, as it loses it when it clicked
function resetBackButton() {
datePickerBackButton = document.querySelector("#body");
datePickerBackButton = document.querySelector("#body > div.daterangepicker.dropdown-menu.opensleft.show-calendar > div.calendar.left > div > table > thead > tr:nth-child(1) > th.prev.available");
}
function clickIfDatesDoNotMatch() {
datePickerDate = checkDatePickerHeader(datePickerHeaderSelector);
if (targetDate.getFullYear() < datePickerDate.getFullYear() || targetDate.getMonth() < datePickerDate.getMonth()) {
datePickerBackButton.click();
resetBackButton();
} else {
clearInterval(funcInterval);
}
}
var datePickerHeaderSelector = "#body > div.daterangepicker.dropdown-menu.opensleft.show-calendar > div.calendar.left > div > table > thead > tr:nth-child(1) > th.month";
var datePickerBackButton = document.querySelector("#body > div.daterangepicker.dropdown-menu.opensleft.show-calendar > div.calendar.left > div > table > thead > tr:nth-child(1) > th.prev.available");
var targetDate = new Date("2016-12-01");
var datePickerDate;
var funcInterval = setInterval(clickIfDatesDoNotMatch, 1000);
})();
The above code runs the clickIfDatesDoNotMatch function once per second. If the dates do not match, the function will click the Back button (then reassign the Back button element) to the datePickerBackButton variable, since it appears to lose track of when the elements change on the page after the click), repeating this process until the dates will match.
source to share