After grabbing data from a textarea where each value is separated by a comma, I am transforming it into an array and adding each element to a div with the class name chars. Specifically, I want to ensure that only 5 children are appended per row within this div.
This is my JavaScript code:
var board = document.getElementsByClassName("chars")[0];
var input = document.getElementById("charInput").value;
function appendElements(){
input = input.replace(/ /g,'')
var array= input.split(",");
for(var i=0; i<array.length; i++){
var elem = document.createElement("p");
var textnode = document.createTextNode(array[i]);
elem.appendChild(textnode);
board.appendChild(elem);
}
}
I'm not sure if CSS plays a role in resolving this issue. Here's the current CSS styling of my div (chars):
.chars{
padding: 20px 20px;
display: flex;
justify-content: space-evenly;
}
I attempted the following but it did not achieve the desired result:
var br = document.createElement("br");
if( (i+1)%5 ==0 ){
board.appendChild(br);
}
else{
board.appendChild(elem);
}
Any help or advice would be greatly appreciated!