0

Tengo un código similar a:

.competition{
  background-size: 48px;
}
.team1{
  background-image:url(https://api.sofascore.com/api/v1/unique-tournament/16/image);
  background-repeat:no-repeat;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<img width="48" src="https://i.ibb.co/w0qg9JF/trans.png" alt="" class="img-fluid competition team1">

Ejemplo en Codepen

¿Hay alguna manera de utilizar JavaScript para que me imprima algo de texto justo debajo de la imagen?

Es decir.

Al tener: class="img-fluid competition team1">

Mediante la clase "team1" escribir como texto (debajo de la imagen): "Equipo 1"

Y hacerlo así para varios elementos.

2 respuestas 2

1

Colocar texto directamente a una etiqueta 'img' no se puede, ya que esta etiqueta es para imagen. Pero podrias agregar una logica distinta, por ejemplo todo eso colocarlo de una etiqueta 'div' y dentro colocar tu etiqueta 'img' y una etiqueta 'p'.

<div> 
  <img width="48" src="https://i.ibb.co/w0qg9JF/trans.png" alt="" class="img-fluid competition team1"> 
  <p id='agregar-texto'></p>
</div>'

if(true){
  let p = document.getElementById('agregar-texto');
  p.innerText = 'Agregar texto' //esta propiedad inserta texto a un elemento
  p.innerHTML = 'Agregar texto' //esta propiedad inserta codigo HTMl, pero tambien puedes ocuparla para insertar texto.
}

1
  • Tu respuesta es genial, sin embargo quiero saber si realmente utilizando un solo "id" o "class" dentro de un div se puede: 1. Mostrar la imagen de "team1" y justo debajo (con figure de Bootstrap) se muestre el texto que yo indique: "Agregar Texto" el 22 nov. 2020 a las 22:49
0

He logrado hacer lo que estaba buscando.

let team1 = `
<figure class="figure">
<img class="figure img-fluid competition imgTeam" width="48" src="https://i.ibb.co/w0qg9JF/trans.png" alt="">
<figcaption style="margin-bottom: -10%; margin-top: 8%; margin-right: 5px;" class="figure-caption">
Sociedad
</figcaption>
</figure>
`;

for(const ele of document.getElementsByClassName("team-1")){ele.innerHTML=(team1)}
.competition{align-items:center;width:48px;background-size:48px;margin-top:-5px}
.imgTeam{background-image:url(https://www.sofascore.com/images/team-logo/football_2824.png);background-repeat:no-repeat}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<span class="team-1"></span>

He utilizado el siguiente código para crear mi estructura HTML utilizando "figure" de Bootstrap:

<figure class="figure">
<img class="figure img-fluid competition imgTeam" width="48" src="https://i.ibb.co/w0qg9JF/trans.png" alt="">
<figcaption style="margin-bottom: -10%; margin-top: 8%; margin-right: 5px;" class="figure-caption">
Sociedad
</figcaption>
</figure>

Luego he creado una variable en JavaScript en la cual he guardado mi código:

let team1 = `
<figure class="figure">
<img class="figure img-fluid competition imgTeam" width="48" src="https://i.ibb.co/w0qg9JF/trans.png" alt="">
<figcaption style="margin-bottom: -10%; margin-top: 8%; margin-right: 5px;" class="figure-caption">
Sociedad
</figcaption>
</figure>
`;

Y por último imprimo en un elemento html lo que quiero mostrar obteniendo la clase en JavaScript con el siguiente código:

for(const ele of document.getElementsByClassName("team-1")){ele.innerHTML=(team1)}

No sé si es la manera más efectiva de hacerlo, sin embargo funciona perfecto para lo que yo necesito.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.