1

Tengo una función que ya sirve, pero no se como agregar en una parte especifica del HTML

const coins = [
    {id: 'BTC', name: 'Bitcoin', price: 38875.6, imgUrl: 'https://cryptologos.cc/logos/bitcoin-btc-logo.svg?v=022'},
    {id: 'ETH', name: 'Ethereum', price: 2813.72, imgUrl: 'https://cryptologos.cc/logos/ethereum-eth-logo.svg?v=022'},
    {id: 'USDT', name: 'Tether', price: 1, imgUrl:'https://cryptologos.cc/logos/tether-usdt-logo.svg?v=022'},
    {id: 'BNB', name: 'Binance Coin', price: 371.14, imgUrl:'https://cryptologos.cc/logos/bnb-bnb-logo.svg?v=022'},
]

const main__section = document.getElementById('cotizaciones__container')

function createCoin(index){
    const createStruct = document.createElement('div')
    createStruct.style = 'display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr; justify-items: start; align-items: center;'
    
    createStruct.innerHTML = 
        `   </div class="coin__main__container">
            <div class="coin__logo"><img src="${coins[index].imgUrl}"></div>
            <div class="coin__moneda">${coins[index].name}</div>
            <div class="coin__abreviatura">${coins[index].id}</div>
            <div class="coin__price">${coins[index].price}</div>
            </div>`;

    return document.body.appendChild(createStruct)
}

createCoin(2); //Tether

Pude recorrer bien el arreglo de objetos, ya pude hacer todo lo que quería hacer, pero no se como insertar en un <section> que se llama cotizaciones__container. En el script se llama main__section

Nada mas quiero que cuando se agregue, lo haga en el contenedor principal

1
  • Estás buscando algo como main__section.appendChild(createStruct)? el 8 mar. 2022 a las 13:26

1 respuesta 1

0

Para mostrar en el HTML o DOM, hacia falta una sola línea de Javascript.

Para una mejor demostración, cree un archivo CSS aparte con algunos estilos adicionales que se puede agregar en el mismo script.

La línea de código que faltaba es:

main__section.innerHTML(createStruct)

Ó

main__section.appendChild(createStruct)

Un ejemplo completo:

const coins = [ 
{
 id: 'BTC', 
 name: 'Bitcoin', 
 price: 38875.6, 
 imgUrl: 'https://cryptologos.cc/logos/bitcoin-btc-logo.svg?v=022'
},{
 id: 'ETH', 
 name: 'Ethereum', 
 price: 2813.72, 
 imgUrl: 'https://cryptologos.cc/logos/ethereum-eth-logo.svg?v=022'
},{
 id: 'USDT', 
 name: 'Tether', 
 price: 1, 
 imgUrl:'https://cryptologos.cc/logos/tether-usdt-logo.svg?v=022'
},{
 id: 'BNB', 
 name: 'Binance Coin', 
 price: 371.14, 
 imgUrl:'https://cryptologos.cc/logos/bnb-bnb-logo.svg?v=022'
},

];

function createCoin(index){ 
 
 const createStruct = document.createElement('div');  
 
 //createStruct.style = 'display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr; justify-items: start; align-items: center;'; 
 
 createStruct.innerHTML = ` 
 <div class="coin__main__container"> 
  <div class="coin__logo">
   <img src="${coins[index].imgUrl}">
  </div> 
 <div class="coin__moneda">${coins[index].name}</div> 
 
 <div class="coin__abreviatura">${coins[index].id}</div> 
 
 <div class="coin__price">${coins[index].price}</div> 
 
 </div>`; 
 
 return document.body.appendChild(createStruct) 

} 

createCoin(2); //Tether

const main__section = document.getElementById('cotizaciones__container').innerHTML(createStruct)
* {
 box-sizing: border-box
}

html,body {
 margin: 0;
 padding: 0;
}

body {
 min-height: 100vh;
 background-color: lightblue;
}

.coin__main__container {
 display: grid; 
 grid-template-columns: repeat(5, 1fr); 
 grid-template-rows: 1fr; 
 justify-items: start;
 align-items: center;
 position: relative;
 width: 100%;
 min-height: 100px;
 background-color: rgba(47,47,98, 0.5)
}

.coin__logo {
 width: 100px;
 position: relative;
 margin: 1em;
}

.coin__logo img {
 display: block;
 width: 100%;
 object-fit: cover;
}

.coin__moneda {
 font-weight: bold;
 color: green;
}

.coin__abreviatura {
 font-style: italic;
}

.coin__price {
 font-weight: bold;
 color: red;
}
<section id="cotizaciones__container">

</section>

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.