I'm currently working on a function to insert columns into a Bootstrap row using Vue/javascript. However, I've hit a roadblock with the second part of the process, which involves inserting child nodes. No matter where I place the index in the loop, it doesn't seem to work. I've tried multiple approaches without success. The goal is to insert a swatch into the row and subsequent columns thereafter. The first swatch insertion works fine. The columns are set to col-md-3 for 4 across. The code snippet below shows that the statement works for the first insertion but fails at the next stage.
// Conditional statement to check if swatch exists before insertion
let swatch = document.querySelector('.row');
let element = document.getElementById("bg-gradient");
// If it isn't "undefined" and it isn't "null", then it exists.
if (typeof(element) != 'undefined' && element != null) {
let i;
swatch = document.querySelector('.row').children[i];
for (i = 0; i < swatch.length[0]; i++) {
swatch[i].appendChild(newSwatch);
gradDiv.style.backgroundImage = gradient;
textDiv.innerHTML = `<h5>${hexValues}</h5><p>${hexValues}</p>`;
}
} else {
// First swatch in first row.
swatch.appendChild(newSwatch);
gradDiv.style.backgroundImage = gradient;
textDiv.innerHTML = `<h5>${hexValues}</h5><p>${hexValues}</p>`;
}
https://i.sstatic.net/EAl5r.jpg
HTML before swatches, into an empty row:
<div class="container-fluid bg-3 text-center">
<h3>Your Gradients</h3><br>
<div class="row">
</div>
</div>
With swatch added
<div class="container-fluid bg-3 text-center">
<h3>Your Gradients</h3><br>
<div class="row">
<div class="col-md-3">
<div id="bg-gradient">
</div>
<div id="info">
</div>
</div>
</div>
</div>
To resolve the issue with the loop not inserting the swatches in each subsequent col-md-3 position, one solution could be to test if the id "bg-gradient" exists in an if statement, as this id corresponds to the div containing the actual gradient. This might be a more efficient approach than using a for loop. What would be the best way to test for the existence of the id #bg-gradient? Any suggestions or tips are greatly appreciated!
https://github.com/xhostcom/vue-gradient-swatch-generator.git
Thank you in advance for any advice or guidance.