Quiero crear un enlace "dinámico" en una página que cambie según un valor de una matriz. Una especie de f-string en Python...
Así que tengo esta variable con una matriz:
let movies = [ { "originalTitle": "The Shawshank Redemption", "director": "Frank Darabont", "year": 1994, "genre": "Drama", "runtimeMinutes": 142, "averageRating": 9.3 }, { "originalTitle": "The Godfather", "director": "Francis Ford Coppola", "year": 1972, "genre": "Crime", "runtimeMinutes": 175, "averageRating": 9.2 } ] Y quiero en mi HTML "llenar" la URL con el título de la película. Cambiando esta parte domain.com/search?q=The%20Godfather donde la sección "The Godfather" podría ser otra película, como domain.com/search?q=The%20Shawshank%20Redemption
<p><a href="domain.com/search?q=The%20Godfather">Click here</a> to search where you can watch this movie.</p>Tenga en cuenta que tengo una variable que selecciona qué película ya se insertará. Solo necesito saber cómo hacer esta etiqueta de anclaje "dinámica" e insertar la película dentro de esa variable.
Sé cómo hacer esto con .textContent con etiquetas de span en mi HTML. Pero lo que quiero reemplazar está dentro de la etiqueta de anclaje. ¿Cómo puedo conseguir esto?
Puede utilizar la API URLSearchParams
const movies = [{ "originalTitle": "The Shawshank Redemption", "director": "Frank Darabont", "year": 1994, "genre": "Drama", "runtimeMinutes": 142, "averageRating": 9.3 }, { "originalTitle": "The Godfather", "director": "Francis Ford Coppola", "year": 1972, "genre": "Crime", "runtimeMinutes": 175, "averageRating": 9.2 } ]; const anchor = document.querySelector('#anchor'); const searchParams = new URLSearchParams(window.location.search); searchParams.set("?q", movies[0].originalTitle); anchor.href += searchParams.toString(); console.log(anchor.href) <p><a id="anchor" href="https://domaintest.com/">Click here</a> to search where you can watch this movie.</p>Puede obtener el elemento de anclaje con querySelector y luego establecer el atributo href, intente esto:
let movies = [ { "originalTitle": "The Shawshank Redemption", "director": "Frank Darabont", "year": 1994, "genre": "Drama", "runtimeMinutes": 142, "averageRating": 9.3 }, { "originalTitle": "The Godfather", "director": "Francis Ford Coppola", "year": 1972, "genre": "Crime", "runtimeMinutes": 175, "averageRating": 9.2 } ]; let anchor = document.querySelector('#anchor'); anchor.href = `domain.com/${movies[0].originalTitle}`; <a id="anchor">Click</a>