Search code examples
javascriptangularinputautomationconsole

Values entered into input using google chrome console not registering unless I manually click the input and add and remove characters

I am trying to streamline downloading content from Youtube so I can listen to podcasts while not around internet. Here is what I have come up with so far.

// I'd run this first to get to the page
this.document.location = 'https://youtubetoaudio.com/youtubetomp3';

// this should put the link in the search box and search.
async function fetchPromise() {
  const response = fetch('https://youtubetoaudio.com/youtubetomp3');
};

// the url I'm entering in the next piece of code isn't actually registering unless 
// I manually click in the box and add and delete a character.
fetchPromise().then((response) => {
  document.querySelector('#videoinput').value = 'https://www.youtube.com/watch?v=mzeIbIFnzc4&list=WL&index=7';
});

// these next pieces won't work which should download the first link on the next page.
document.forms[0].searchbtn.click();
document.querySelector('#MP3').getElementsByTagName("button")[0].click();

I was expecting the file to download from the link I searched, but it appears as if setting the value with the below doesn't actually set the value and the search fails.

document.querySelector('#videoinput').value = 'https://www.youtube.com/watch?v=mzeIbIFnzc4&list=WL&index=7';
Solution

  • https://youtubetoaudio.com/youtubetomp3 uses Angular under the hood. Angular updates the model on input event. You should trigger it manually, after you set the value.

    const inputElement = document.querySelector('#videoinput');
inputElement.value = 'https://www.youtube.com/watch?v=mzeIbIFnzc4&list=WL&index=7';
inputElement.dispatchEvent(new Event('input', {
  view: window,
  bubbles: true,
  cancelable: true
}))

    It is important to understand, that in different frameworks, the event type that propagates the changes under the hood may differ. ('change' event for instance)