Multiple callbacks on JS event

Question

I have a form with two inputs fields.

  <form action="file.js" method="post" class="FormData">
    <div>
        <p>Year</p>
    </div>
    <div>
        <input type="number" name="Year"></input>
    </div>

    <div>
        <p>Name</p>
    </div>
    <div>
        <input type="text" name="Tvshow"></input>
    </div>
    <div>
       <button class="btn">Send</button>
    </div>
</form>

On the one hand Year field will obtain year chosen by user to show any tvshow and tvshow field will save tvshow name to show it base on moviedb Api request.

This is my javascript code:

const callbackYear = Year_User => 
{
    Year_User(Year);
}

const callbackTvshow = show => 
{
  show(name)
}

const getData = () => {
    const button = document.querySelector(".btn");
    button.addEventListener("click", () => {
        const Form = document.querySelector(".FormData");
        const Year = new FormData(Form).get("Year");
        const name = new FormData(Form).get("Tvshow");
        callbackYear(Year);
        callbackTvshow(name);
    });
}

callbackYear((Year_User) => 
{
  console.log(Year_User);
})

callbackTvshow((show) => 
{
  console.log(show);
})

Basically what I'm trying to do is to get both data (Year and Tvshow name) with two severals callbacks called Year_User and show to make an statement between the two callbacks.

Something like this:

//Example
 callbackYear((Year_User) => 
 {
   if(Year_User!=undefined)
   {
     callbackTvshow((Tvshow) => 
     {
       //Code


     })
   }
 })

Maybe it could be more clearly now with this example.

Please help!

Answer 1

seems that you put the wrong name to the Tv show property

The code:

    const Year = new FormData(Form).get("Year");
    const name = new FormData(Form).get("Name");
    alert(Year);
    alert(name);

Prints the "Year" and "null" cause "Name" is not a field name... The correct one would be "Tvshow"

  const Year = new FormData(Form).get("Year");
  const name = new FormData(Form).get("Tvshow");
  alert(Year);
  alert(name);

It outputs the Year and the name correctly.

Edit:

If I understood correctly after the updates the point is, you want to get different data (year and TV), but one data depends on the other so you want to execute a callback if, and only if, a condition is matched, as the example shows.

So, why instead of delegating this problem to 2 callbacks what if we had some extra functions to help us? We can create a "main" function and then do some logic there, we can get the data, we can process it, etc.

button.addEventListener('click', runScript);
function runScript() {
     const year = get Year

      if (year) {
        // doSomeCoolStuff with the tv show
      }
     }

By doing this is possible to create functions generic enough to be called all long the code, so if we want to process the tv show without caring about the year, if we do this approach correctly will be possible to do

processTvShow(...)

On the other hand, as the example, if we depend of the year, we can easily do

if (year) {
   processTvShow(...)
}

Answer 2

The above code is calling getData twice with one param.

But getData accepts two params at the same time:

getData(
  (Year_User) => { console.log(Year_User) }, 
  (Tvshow) => { console.log(Tvshow) }
)