Tengo este array con objetos y lo que estaba pretendiendo hacer (sin mucho exito, soy bastante nueva en esto) es que en cada cuadro saliera el texto del valor meaning (el objetivo final es que salgan de manera random pero por ahora está bien si es en orden, así queden unos afuera) y que en el h1 al final saliera el texto del valor slang, pero cuando actualizo no pasa gran cosa. ¿Alguien me podría señalar que eso haciendo mal? Gracias!:
var slang = [{
slang: "¿Qué más?",
meaning: 'it’s actually just a local way to say “What’s up?”'
},
{
slang: "¡Listo!",
meaning: 'Ready, done, ok'
},
{
slang: "¡Deli!",
meaning: 'Yummy or delicious'
},
{
slang: "Rumbear",
meaning: 'To party'
},
{
slang: "Inmamable",
meaning: 'Annoying'
},
{
slang: "Guacala",
meaning: 'Yuck'
},
{
slang: "Chevere",
meaning: 'Cool'
},
{
slang: "¡De una!",
meaning: 'An enthusiastic way to say “yes, let’s do it!”.'
},
{
slang: "¿Quién dijo yo?",
meaning: 'Anyone?'
},
{
slang: "¡Que vaina!",
meaning: 'Too bad'
},
{
slang: "Ni modo",
meaning: 'Oh well or never mind'
},
{
slang: "Para nada",
meaning: 'Not at all'
},
{
slang: "¡Ya dijo!",
meaning: 'Yeah right!'
},
{
slang: "Ni loco!",
meaning: 'No way'
}
]
var squares = document.querySelectorAll(".square");
var pickslang = slang[3].slang;
var randomSlang = document.getElementById(randomSlang);
randomSlang.texContent = pickslang;
for (var i = 0; i < squares.length; i++) {
squares[i].texContent = slang[i].meaning
}
.square {
width: 30%;
background-color: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
margin: 0 auto;
max-width: 600px;
}
<h1>The colombian slang is: <span id="randomSlang">Slang</span></h1>
<div id="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>