0

I am trying to convert the youtube video to audio using a API here is the API syntax is

<iframe id="buttonApi" src="https://yt-download.org/api/button/mp3?url=https://www.youtube.com/watch?v=zvrMzRVtj1s" width="100%" height="100%" allowtransparency="true" scrolling="no" style="border:none"></iframe>

and the src syntax is

https://yt-download.org/api/button/{FTYPE}?url={VIDEO_URL}

so what i am doing is within a form create a search bar and a submit button and there once the user enters the youtube video link in the search bar onclick of search button it should get connected to the url= part in the api code,but all i am getting is a blank screen

my outout

which should ideally look like this and it works only if i directly enter the youtube url into the src="" ideal output

heres the html and js code

<html>
<body>
<script>
    const f = document.getElementById('form');
    const q = document.getElementById('query');
    const site = 'https://yt-download.org/api/button/mp3?url=';

    function apiworks(){
      const url = site + q.value;
      document.getElementById('buttonApi').src = url;

    }
    f.addEventListener('submit',apiworks);
</script>

    <form id="form" role="search">
      <input type="search" id="query" name="q"
       placeholder="Search..."
       aria-label="Search through site content">
      <button onclick="apiworks()">Search</button>
    </form>
      
    <iframe id="buttonApi" src="" width="100%" height="500px" allowtransparency="true" scrolling="no" style="border:none"></iframe>      
  </body>
  </html>

would really appreciate if anybody helps me out..!

Kashmira Dhere
  • 23
  • 5
  • https://jsbin.com/jonoleqamu/1/edit?html,output — I can't reproduce the problem. – Quentin Apr 19 '22 at 14:35
  • please check the html and js code i have done – Kashmira Dhere Apr 19 '22 at 14:50
  • 1
    Duplicate: https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element (which would have been more obvious if you had looked at the developer tools console and quoted the error message there) – Quentin Apr 19 '22 at 14:51
  • 1
    Oh, and you've got *two* event handlers both calling `apiworks`. You should only have one. – Quentin Apr 19 '22 at 14:51
  • 2
    Oh, **and** one of those event handlers is a `submit` handler and you aren't preventing the default behaviour, so the form is going to submit and load a new page … erasing all the work the JS did. – Quentin Apr 19 '22 at 14:52
  • Entirely unrelated to the question, but there was recently a significant security flaw in Chrome and you appear to be on a rather old version. I would recommend updating it as soon as possible. – DBS Apr 19 '22 at 14:56
  • @Quentin even after removing the submit handler the page appers to be blank – Kashmira Dhere Apr 19 '22 at 14:58
  • 1
    You need to fix all three problems that I highlighted. Not just one of them. (Removing the submit handler doesn't stop the submit button from submitting the form). – Quentin Apr 19 '22 at 15:00
  • @Quentin Thanks a ton...i just prevented the default values..and it worked..!! – Kashmira Dhere Apr 19 '22 at 15:07

1 Answers1

0

thanks to all those who tried to help me out,just a single change of line fixed my problem

<form id="form" role="search" onsubmit="event.preventDefault()";>

onsubmit attribued saved all my default values so the work done by javascript remains intact even after form submission

Kashmira Dhere
  • 23
  • 5