Tengo una matriz de 0-3 valores de nombre. Necesito recorrer mi matriz y escribir los valores en 3 <p> diferentes con diferentes nombres de clase.
No estoy seguro de cómo usar innerHTML para asignar los valores de datos a divs individuales. Mucha información en línea sobre cómo escribir todos los datos en un solo div pero no en múltiplos (que pude encontrar).
Aquí está el código principal...
const dataResults = ['Apple', 'Orange', 'Pear'] for (var i = 0; i < dataResults.length; i++) { //how to distribute these results to V1, V2 and V3??? console.log(dataResults[i]); } <div class="selections"> <p class="v1">-</p> <p class="v2">-</p> <p class="v3">-</p> </div>Como bono de cierre, también tendré que vaciar la matriz después de que haya completado su tarea.
Debe crear dinámicamente el selector a partir de su índice de bucle:
const dataResults = ['Apple', 'Orange', 'Pear'] for (var i = 0; i < dataResults.length; i++) { el = document.querySelector('.v' + (i + 1)); text = document.createTextNode(dataResults[i]); el.appendChild(text); console.log(dataResults[i]); } <div class="selections"> <p class="v1">-</p> <p class="v2">-</p> <p class="v3">-</p> </div> const dataResults = ['Apple', 'Orange', 'Pear']; for (var i = 0; i < dataResults.length; i++) { document.querySelector(".v" + (i + 1)).innerHTML = dataResults[i]; } //Additional from the comment document.getElementById("clearBtn").addEventListener("click", function(){ document.querySelectorAll(".v1, .v2, .v3").forEach(function(item) { item.innerHTML = ""; }); }); <div class="selections"> <p class="v1">-</p> <p class="v2">-</p> <p class="v3">-</p> </div> <!--Additional from the comment --> <button type="button" id="clearBtn">Clear</button>Una solución al problema anterior es almacenar las etiquetas <p> en la lista y agregar los elementos en ella. Me gusta:
const dataResults = ['Apple', 'Orange', 'Pear'] let d = document.getElementsByClassName('selections')[0] let p = d.children; let count = d.childElementCount; for (var i = 0; i < dataResults.length; i++) { p[i%count].innerHTML = dataResults[i] console.log(dataResults[i]); } <div class="selections"> <p class="v1">-</p> <p class="v2">-</p> <p class="v3">-</p> </div>