使用 JavaScript 清除按钮 onclick 上的数组值？

Question

正在学习 JS，需要一些帮助。感谢堆栈溢出，我现在有一个显示加载主题列表的函数。我希望按钮值在单击时清除并替换为第二个函数的数组。这是创建一组新的按钮，我可以看到问题出在哪里，但不确定如何更正它。我尝试了几种方法但没有运气，这是基本代码。它被分配给 'subjects' div in HTML doc.

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
})

Answer 1

通过清除父 Div 的 innerHTML 将起作用。

document.getElementById("subject").innerHTML = "";

工作演示：

let subjectArray = ['Maths', 'English', 'Science', 'IT'];
let testArray = ['Test 1', 'Test 2', 'Test 3', 'Go Back'];
let subjects = document.getElementById("subject");

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";
    }
}

function printTest() {
        document.getElementById("subject").innerHTML = "";
    for (let i = 0; i < testArray.length; i++) {
        let test = document.createElement('button');
        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
})

<div id="subject">

</div>

使用 JavaScript 清除按钮 onclick 上的数组值？

Using JavaScript to clear array values on buttons onclick?

html

javascript

arrays

twitter-bootstrap