未捕获到的ReferenceError：在HTMLInputElement.onclick上未定义myFunctionName

Question

I am using a form with 4 fieldsets. The second and third fieldsets are displayed based on a question I ask with a checkbox. I always display the second fieldset and hide the third. If you check the box, it should hide the second and show the third fieldset.

I am using a function in javascript. This is the code:

window.onload = function showVlees() {
    if (document.getElementById('Vlees').checked) {
        document.getElementById('Vleesgerecht').style.display = 'block';
    } else {
        document.getElementById('Vleesgerecht').style.display = 'none';
    }
}

Every time when I click the checkbox I get this error:

Uncaught ReferenceError: showVlees is not defined
    at HTMLInputElement.onclick

My checkbox is coded like this:

<td> <input type="checkbox" id="Vlees" name="Vlees" value="Vlees" onclick="showVlees()"> Klik hier als u een vleesgerecht wilt.</input>

Does anyone know what the problem is?

Answer 1

Named function expressions create a variable with a matching name only in their own scope , not the scope of the function they are defined in.

Use a function declaration and assign it to your load event handler in two steps.

function showVlees() { 
    // etc
}
window.onload = showVlees;