I have an array of 0-3 name values. I need to loop through my array and write the values to 3 different <p> with different class names.
Not sure how to use innerHTML to assign the data values to individual divs. Plenty of info online about how to write all the data to a single div but not multiples (that i could find).
Here is the principle code...
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>As a closing bonus I will also need to empty the array after it has completed its task.
You should dynamically build selector from your loop index:
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>One solution to the above problem is by storing the <p> tags in the list and adding the elements in it. Like:
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>