How to pass parameters to destination url using javascript

Question

I am trying to pass a movie id to the url when a movie is clicked on, and retrieve the movie id in the destination page. I know forms do this by default, but I want to accomplish this with an anchor element.

So for example i have this homepage url:

http://127.0.0.1:5500/client/index.html

I click on a movie on the homepage and the movie has an anchor tag which redirects to a different file:

http://127.0.0.1:5500/client/views/movies.html

The movie has an id that I want to be available in the /movies.html page, and the movies url should look something like this:

http://127.0.0.1:5500/client/views/movies.html?movieId=1234

How would I accomplish this using javascript?

Here is the html:

 <div class="card">
    <a href="${'/client/views/movies.html'}" data-src="1234" >
        <img class="img-size" src="${poster_image}" alt="">
    </a>
    <div class="card-body">
       <h6 class="card-title"> ${el.title}</h6>
          <p>${el.release_date}</p>
    </div>
 </div>

Answer 1

Just add the desired parameter in the anchor tag href itself like this:

 <div class="card">
    <a href="${'/client/views/movies.html?movieId=1234'}" data-src="1234" >
        <img class="img-size" src="${poster_image}" alt="">
    </a>
    <div class="card-body">
       <h6 class="card-title"> ${el.title}</h6>
          <p>${el.release_date}</p>
    </div>
 </div>