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/[email protected]/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" Commented 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/[email protected]/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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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