Estoy tratando de agregar un elemento en una matriz vacía usando .push inside loop y luego mostrarlo nuevamente, pero no sucede nada. A continuación se muestra mi código actual:
$('.button').on('click', function(){ const canvasArray = []; $('.box').each(function(){ var boxName = $(this).text(); canvasArray.push(boxName); }); console.log(canvasArray); }); <div class="catalog"> <div class="box box-1">Red</div> <div class="box box-2">Blue</div> <div class="box box-3">Green</div> <div class="box box-4">Yellow</div> </div> <div id="result"></div>En el registro de mi consola, devuelve algo como esto:
Array(4) [ "Red", "Blue", "Green", "Yellow" ] 0: "Red" 1: "Blue" 2: "Green" 3: "Yellow" length: 4 Quiero mostrar el valor de mi canvasArray y agregarlo a un DIV y estoy tratando de hacer algo como esto:
$.each(canvasArray, function(index, value){ $("#result").append(index + ": " + value + '<br>'); });pero no pasa nada y no hay error en el registro de mi consola. ¿Alguna idea?
Tu código funciona. Aquí está. ¿Quizás no estabas seguro de cómo estructurarlo todo?
En esta demostración, el div de results se completa al presionar un segundo botón, pero también puede mover el $.each() hacia arriba en el controlador de clic del primer botón (debajo de console.log, por ejemplo).
const canvasArray = []; $('.button').on('click', function(){ $('.box').each(function(){ var boxName = $(this).text(); canvasArray.push(boxName); }); console.log(canvasArray); }); $('.button2').on('click', function(){ $.each(canvasArray, function(index, value){ $("#result").append(index + ": " + value + '<br>'); }); }); #result{ position:fixed; top: 0px; left: 350px; width: 200px; height: 130px; margin-top:20px; background:wheat; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="catalog"> <div class="box box-1">Red</div> <div class="box box-2">Blue</div> <div class="box box-3">Green</div> <div class="box box-4">Yellow</div> </div> <button class="button">Populate Canvas Array</button> <button class="button2">Write Into Results Div</button> <div id="result"></div>