My app features 14 buttons, each generating a replica button with the same text when clicked. The pre-existing buttons are numbered to aid in iteration. I'm currently attempting to organize the newly created replica buttons in ascending order from left to right when two or more original buttons are clicked together.
The current issue lies in the fact that while the first two replica buttons are correctly ordered, the desired sorting is not maintained when three or more pre-existing buttons are clicked consecutively. This could be due to a break in the loop once the initial render occurs, but I'm struggling to find a solution. Can you offer any guidance?
I believe the problem may stem from this section of code:
function orderButtons(array) {
for (i in array) {
let sideElements = array[i];
if (array.length >= 2) {
sortNumbers(array);
/*let classArray = this.className.split(' ')
let buttonNum = +(classArray[0]);
let index = sideArray.indexOf(buttonNum);*/
choiceButtons(sideButtons[sideElements].textContent);
console.log(array);
}
}
}
Edit: Another potential issue may lie in this portion of the code:
function choiceButtons(innerText) {
//create button
if (intervalArray.indexOf(innerText) === -1) {
let choiceBtn = document.createElement("BUTTON");
//chooseDiv.style.visibility ="hidden";
//document.getElementById('start-button').disabled = true; //add inner text to choice buttons
choiceBtn.textContent = innerText;
//append to choice-buttons-div
document.getElementById("choice-buttons-div").appendChild(choiceBtn);
choiceBtn.className = "choice-buttons";
//push innerText to array
intervalArray.push(innerText);
console.log(intervalArray);
let childNodes = chooseDiv.childNodes;
console.log(intervalArray);
}
}
You can access the pen here: https://codepen.io/david-webb/pen/abNmbVm?editors=1010
To temporarily remove the buttons, I've implemented a clear function. I then attempt to re-render the buttons by calling the orderButtons function, but so far without success.