While experimenting with a website’s behavior, I encountered a challenge when attempting to set the value of an input element via the console in JavaScript. Specifically, I’m working with the following URL: https://www.goibibo.com/hotels/. My goal is to populate the city field using the console.
The element I’m targeting is:
const inputElement = document.getElementById('downshift-1-input');
inputElement.value= "Nashik, Maharashtra, India"
Although the value appears in the browser, it remains blank in the “Elements” tab of the console. Interestingly, when I check inputElement.value in the console, it does show the desired value. However, upon clicking search, “Nashik, Maharashtra, India” disappears from the browser.
I’ve experimented with different methods to set the value, including:
const inputElement = document.getElementById('downshift-1-input');
inputElement.setAttribute('value', 'Nashik, Maharashtra, India')
and
// Get the HTML input element
const inputElement = document.getElementById('downshift-1-input');
// Text to simulate typing
const textToType = "Nashik, Maharashtra, India";
// Function to simulate typing
function simulateTyping(text) {
let index = 0;
const intervalId = setInterval(() => {
const char = text.charAt(index);
const keydownEvent = new KeyboardEvent('keydown', { 'key': char });
inputElement.dispatchEvent(keydownEvent);
setTimeout(() => {
const keyupEvent = new KeyboardEvent('keyup', { 'key': char });
inputElement.dispatchEvent(keyupEvent);
}, 100); // Interval between keydown and keyup events
inputElement.value += char; // Update input value
index++;
if (index >= text.length) {
clearInterval(intervalId);
}
}, 200); // Interval between each keystroke (keydown + keyup)
}
// Call the function to simulate typing
simulateTyping(textToType);
However, all attempts yield the same outcome.
Is there a workaround to achieve my objective?