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>
id="id"
id
debe ser único lo que significa que cuando intentes acceder a el siempre te devolverá el primero que encuentre, te recomiendo usarclass