Changing content of a page based on the <a> that called it

Asked

Viewed 40 times

1

I have a file index.html multi-tagged <a> the href of them all point to the same file, detalhe.html. In this file detalhe.html i have tags for <image>, <ul><li>, <iframe>, <h3>, etc..

The point is that the content of these tags should be dynamic, that is, depending on which tag <a> of the archive index.html was clicked, the content of detalhe.html should be different. Imagine a list of movies by clicking on each movie opens the file detalhe.html that contains the details of that film (Genre, Duration, Director, Trailer, etc.).

I know that to modify an element the path is getElementById but how to do this based on the tag <a> which called the HTML file?

javascript html5
  • 1

    You will need to change the href of your links by setting, for example, the fragment: detalhe.html#genero. So, on the detail page, just check the value of window.location.hash and display its contents.

  • You could leave an example?

1 answer

0


Solution:

var img_capa;
var h2_titulo;
var li_lancamento;
var li_duracao;
var li_direcao;
var li_gerero;
var p_sinopse;
var iframe_video;

if (typeof window.location.hash != "undefined" && window.location.hash == "#logan"){
    img_capa = "img/logan.jpg";
    h2_titulo = "Logan";
    li_lancamento = "2017";
    li_duracao = "2h: 17min";
    li_direcao = "James";
    li_gerero = "Ação";
    p_sinopse = "Em 2024, os mutantes estão em franco declínio, e as pessoas não sabem o real motivo. Uma organização está transformando as crianças mutantes em verdadeiras assassinas. Wolverine, cansado de tudo e a pedido de um cada vez mais enfraquecido Professor Xavier, precisa proteger a jovem e poderosa Laura Kinney, conhecida como X-23. Enquanto isso, o vilão Nathaniel Essex amplia seu projeto de destruição."
    iframe_video = "https://www.youtube.com/embed/RWSuAC9CYxo"
}

document.getElementById("capa").src = img_capa;

In the example I am only changing the image of the tag <img> but the principle for the other tags is the same. For other movies, just create the clauses else if for other films.

The fragment referred to in the comment is passed on in this way:

<a href="detalhe.html#logan" class="btn btn-danger" role="button">Detalhes</a>

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.