Tengo un modal que muestra imágenes API dentro de un modal, y quiero que se muestre el enlace "Agregar a favoritos" dentro del modal. Hasta ahora, puedo mostrar el "título", la "explicación" y la "fecha" usando result.title, etc. Sin embargo, cuando uso result.saveText para mostrar "agregar a favoritos" como un enlace HTML, se muestra indefinido. ¿Cómo muestro "Agregar a favoritos como un enlace HTML dentro del modal?
// Image const image = document.createElement("img"); image.src = result.url; image.alt = result.title + "<br>" + result.explanation + "<br>" + result.date; image.loading = "lazy"; image.classList.add("card-img-top"); // Card Title const cardTitle = document.createElement("h5"); cardTitle.classList.add("card-title"); cardTitle.textContent = result.title; // Save Text const saveText = document.createElement("p"); saveText.classList.add("clickable"); if (page === "results") { saveText.textContent = "Add To Favorites"; saveText.setAttribute("onclick", `saveFavorite('${result.url}')`); } else { saveText.textContent = "Remove Favorite"; saveText.setAttribute("onclick", `removeFavorite('${result.url}')`); }
No hay nada de malo en mostrar su código (excepto no agregarlo a un elemento principal o documento. cuerpo)
Revisé su modelo y descubrí que saveText
no se agrega a ningún elemento principal ni a ningún documento.cuerpo. El elemento de su código ni siquiera tiene una etiqueta p
.
Probablemente debería usar el método de append
para agregarlo a un elemento principal o a un elemento secundario. En su situación, probablemente debería usar cardTitle.appendChild(SaveText)
Ni siquiera tiene una etiqueta p
en todo tu body
:
document.querySelectorAll('img')[1].onerror = function(){ let div = document.createElement('div') div.textContent = 'Link is invalid.' document.body.appendChild(div) }
<img src="invalid.jpg" alt ="<a href='https://www.w3schools.com'>Visit W3Schools.com!</a>"> <img src="invalid.jpg" >