Javascript在第二个按钮上单击而不是第一个按钮

Question

I have a table that I am trying to display and activate form information in on a button click. The table is set to "display: none" and the button is connected to the javascript. The javascript works but only after the button has been clicked a second time. I would like for it to work the first time it is clicked.

Button & Table HTML:

<button data-bind="click: addPatient" style="margin-top: 20px; margin-bottom: 10px;">Add Patient</button>
    <table id="newPatientForm">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th></th>
        </tr>
        <tbody data-bind="foreach:Patients">
            <tr>
                <td class="form-group"><input data-bind="value: FirstName, event: {change: flagPatientAsEdited}, hasfocus: true" /></td>
                <td class="form-group"><input data-bind="value: LastName" /></td>
                <td class="form-group"><button data-bind="click: $parent.removePatient">Delete</button></td>
            </tr>
        </tbody>
    </table>

This is the table CSS:

#newPatientForm {
    display: none;
}

This is the javascript that the button calls.

self.addPatient = function () {
        var divElement = document.getElementById('newPatientForm');
        var patient = new PatientViewModel({ SiteId: 0, FirstName: "", LastName: "", ObjectState: ObjectState.Added });
        if (divElement.style.display == 'none') {
            divElement.style.display = 'block';
            self.Patients.push(patient);
        }
        else {
            divElement.style.display = 'none';
            self.Patients.pop(patient);
        }
    },

Answer 1

You need to check the computed style when it is set in a stylesheet

function isHidden(elem) {
    var style = window.getComputedStyle(elem);
    return style.display === "none";
}

Change

if (divElement.style.display == 'none') {

to

if (isHidden(divElement)) {

which uses the above method.

It would probably bet better to just have a class that is hidden or not and toggle the class.

And finally, I do not think self.Patients.pop(patient); is doing what you think it is doing. the pop method has no arguments. It does not find and remove elements.