Aprendiendo JS y necesitaba ayuda. Gracias al desbordamiento de pila, ahora tengo una función que muestra la lista de temas en carga. Me gustaría que los valores de los botones se borren cuando se haga clic y se reemplacen con una matriz de la segunda función. Esto está creando un nuevo conjunto de botones, puedo ver dónde está el problema pero no estoy seguro de cómo corregirlo. Lo intenté de varias maneras pero no tuve suerte, aquí está el código básico. Se asigna al div de 'sujetos' en el documento HTML.

 let subjectArray = ['Maths', 'English', 'Science', 'IT']; function printSubjects() { for (let i = 0; i < subjectArray.length; i++) { let sub = document.createElement('button'); let txt = document.createTextNode(subjectArray[i]); sub.append(txt); subjects.appendChild(sub); sub.className = "btn btn-outline-primary mb-2"; } } let testArray = ['Test 1', 'Test 2', 'Test 3', 'Go Back']; function printTest() { for (let i = 0; i < testArray.length; i++) { let test = document.createElement('buttons'); let txt = document.createTextNode(testArray[i]); test.append(txt); subjects.append(test); test.className = "btn btn-outline-secondary mb-2"; } } window.onload = printSubjects(); document.body.addEventListener("click", printTest, { once: true })