在页面加载时，如果选中复选框，则显示字段

Question

So I have the below code that shows/hides fields depending if the checkbox is checked, but I can't seem to figure out when I refresh the page and my sample data on my form that is saved, has the checkmark already checked, why my fields are not showing on page load.

On page load (With saved data):  
- First checkbox checked (Shows nothing)  
- Uncheck then check, then it finally shows  

How can I make the fields show on page load when the checkbox is checked? I've tried calling the DOMContentLoaded but am I doing it correctly?

Code :

const formWrapperPersonal = document.getElementById('form-wrapper-personal');

var rtk11 = document.getElementById('rtk1');
function rtk1() {
    rtk11.addEventListener('change', (e) => {
        if (e.target.checked) {
            formWrapperPersonal.style.display = ''
        } else {
            formWrapperPersonal.style.display = 'none'
        }
    })
}
rtk11.addEventListener('change', rtk1);
document.addEventListener('DOMContentLoaded', rtk1);
rtk1();

Answer 1

You just need to remove the inner event listener as you already have one on the element and the document.

const formWrapperPersonal = document.getElementById('form-wrapper-personal');

var rtk11 = document.getElementById('rtk1');
function rtk1() {
    if (rtk11.checked) {
        formWrapperPersonal.style.display = ''
    } else {
        formWrapperPersonal.style.display = 'none'
    }
}

rtk11.addEventListener('change', rtk1);
document.addEventListener('DOMContentLoaded', rtk1);
rtk1();