0

Este es un resumen de el codigo que tengo, quiero completar los espacios del html con la variable temperaturas, lo que se me ocurre es asignar un valor diferente a cada id y asignarle el valor manualmente a cada uno, pero queria saber como lo podria recorrer con un for u otra forma gracias

<script>let temperaturas = [[5,10],[4,9],[7,14]] </script>

<div>
   <h3 id="min"></h3>
   <h4 id="max"></h4>
</div>
<div>
    <h3 id="min"></h3>
    <h4 id="max"></h4>
</div>
<div>
    <h3 id="min"></h3>
    <h4 id="max"></h4>
6
  • no se entiende la pregunta, tampoco queda clara la sintaxis de id="id"
    – user128299
    Commented el 28 jun. 2020 a las 22:37
  • Por favor, podrías editar tu pregunta y agrega el código que has intentado.
    – Marcos
    Commented el 28 jun. 2020 a las 22:42
  • lo edite espero se entienda gracias por responder
    – natogua
    Commented el 28 jun. 2020 a las 22:52
  • 3
    El atributo id debe ser único lo que significa que cuando intentes acceder a el siempre te devolverá el primero que encuentre, te recomiendo usar class
    – MitaCloud
    Commented el 28 jun. 2020 a las 22:55
  • Agrega que has intentado por favor
    – user128299
    Commented el 28 jun. 2020 a las 23:19

1 respuesta 1

0

Antes que nada como ya te pusieron en los comentarios los id deben ser únicos lo que sería mejor es cambiar el id por una clase pues esta puede ser contenida por n cantadiad de elementos el primer cambio es remplazar los id.

Quedaría de la siguiente forma:

<div>
   <h3 class="min"></h3>
   <h4 class="max"></h4>
</div>

Lo siguiente es que en nuestro código javascript en este caso agregaremos dos constantes una que contendrá los elementos con la clase min e igualmente otra que contendrá los elementos de la clase max

const minElements = document.getElementsByClassName('min'),
      maxElements = document.getElementsByClassName('max') 

Posterior a ello ya tenemos tres arreglos de la misma dimensión cada uno por lo que en un ciclo podremos agregar el texto a cada uno de los elementos.

Resumen de lo que esta escrito más abajo:

const [i, temperatura] // Destructuración de objeto

temperaturas.entries() // Devuelve la clave y el valor de un objeto

for(const [i, temperatura] of temperaturas.entries()) {
  minElements[i].textContent = `min: ${temperatura[0]}`
  maxElements[i].textContent = `max: ${temperatura[1]}`
}

Si entendiste el resumen puedes saltarte esta parte:

Lo primero es que estamos haciendo uso de un for of en donde declaramos una constante en la cual hacemos una destructuración de objetos, en este caso será a un arreglo (recordemos que un arreglo también es un objeto) a lo que le hacemos la destructuración es al arreglo de temperaturas sin embargo para poder hacer eso necesitamos añadir el método .entries() que lo que hace dicho método es devolver la clave y el valor de un objeto, en este caso como el objeto es un array su clave será el indice [0...n) es por ello que en la destructuración añadimos la constante i y una constante temperatura, que esta será la que contendrá cada uno de los arreglo dentro del arreglo.

Ahora ya tienes el indice y el arreglo de cada una de las posiciones solamente basta insertar el texto, con el atributo .textContent

minElements[i].textContent = `min: ${temperatura[0]}`

Destructuring

Object.entries()

let temperaturas = [[5,10],[4,9],[7,14]]

const minElements = document.getElementsByClassName('min'),
      maxElements = document.getElementsByClassName('max')

for(let [i, temperatura] of temperaturas.entries()) {
  minElements[i].textContent = `min: ${temperatura[0]}`
  maxElements[i].textContent = `max: ${temperatura[1]}`
}
<div>
   <h3 class="min"></h3>
   <h4 class="max"></h4>
</div>
<div>
    <h3 class="min"></h3>
    <h4 class="max"></h4>
</div>
<div>
    <h3 class="min"></h3>
    <h4 class="max"></h4>

1
  • Muchas gracias eladio, gracias por tomarte el tiempo de explicarlo habia varios conceptos que no conocia
    – natogua
    Commented el 30 jun. 2020 a las 22:07

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.