Using JavaScript to clear array values on buttons onclick?

Question

Learning JS and needed some help. Thanks to stack overflow, I now have a function that displays list of subjects onload. I'd like the button values to clear when clicked and replaced with array of second function. This is creating a new set of buttons, I can see where the problem is but not sure how to correct it. I've tried a few ways but no luck, here is the basic code. It is assigned to '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
})

It looks like you know your error which is that you are just appending the new buttons to the div. You'll need to clear the innerHTML of `subjects` before appending, alternatively you can edit the current buttons, or manually replace each one. see: [How do I clear inner HTML](https://stackoverflow.com/questions/3450593/how-do-i-clear-the-content-of-a-div-using-javascript), [How to replace DOM element in place using Javascript?](https://stackoverflow.com/questions/843680/how-to-replace-dom-element-in-place-using-javascript) — pilchard, Feb 02 '22 at 22:16
@pilchard Thank You! I used `document.getElementById("subject").innerHTML = ""; ` and it's working now, on to the next one. — yaqub, Feb 02 '22 at 23:00

score 0 · Accepted Answer · answered Feb 03 '22 at 04:14

By clearing the innerHTML of the parent Div will work.

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

Working Demo :

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>

I changed it around a bit. Here is my working version https://jsfiddle.net/mya26/mj93redk/ , what would be the best practice to add url links to the test1, test2 etc buttons? — yaqub, Feb 03 '22 at 15:08
@yaqub I updated the fiddle https://jsfiddle.net/56esdp1y/. Please have a look and let me know if it works as per your requirement. — Debug Diva, Feb 03 '22 at 15:33
It is a steep learning curve and a lot to remember, thank you for pointing me in the right direction! One question though, why did you use id-1 here `testArray[id - 1].link`. This will help me understand better — yaqub, Feb 03 '22 at 16:01
as `id` start with 1 but the `testArray` index start at 0. that's the reason i manipulated like this. — Debug Diva, Feb 03 '22 at 16:07

Using JavaScript to clear array values on buttons onclick?

1 Answers1