更新/替换输出文本onClick - replaceNodes - Javascript

Question

我有一个表单，它接收信息并在div中输出它完整。如果表单未完成，则输出是与需要更正的特定字段相关的错误消息。错误消息/输出更新为信息更改并单击按钮。

当前有效输出将在更改时更新，但在有效输出和错误消息之间，两组文本都出现在页面上，然后保持在那里直到我刷新页面。这是代码：

   /*
    Project 1 - AJAX 2015
    2/14/15
    Mitch Gundrum
 */

/*
    Function to create input and HTML elements,
    Create output nodes; output div
 */

function init() {
//Output Div
    var div = document.createElement("div");
        div.id = "output";
//Name
    var name = document.getElementById("name").value;
        name.type = "text";
//Address
    var address = document.getElementById("address").value;
        address.type = "text";
    var city = document.getElementById("city").value;
        city.type = "text";
    var state = document.getElementById("state");
        state.type = "text";
    var index = state.selectedIndex;
        var fullState = state.options[index];
    var zip = document.getElementById("zip").value;
        zip.type = "text";
//Email
    var email = document.getElementById("email").value;
        email.type = "text";
//Phone Number
    var areaCode = document.getElementById("areaCode").value;
        areaCode.type = "text";
    var prefix = document.getElementById("prefix").value;
        prefix.type = "text";
    var suffix = document.getElementById("suffix").value;
        suffix.type = "text";
//Gender
    var gender = document.getElementsByName("gender");
    var genderChoice = "";
        for (var i = 0; i < gender.length; i++) {
            if (gender[i].checked) {
                genderChoice += gender[i].value;
            }
        }
//Previous Courses
    var courses = document.getElementsByName("courses");
        var courseChoice = "";
        for (var e = 0; e < courses.length; e++) {
            if (courses[e].checked) {
                courseChoice += courses[e].value + ", ";
            }
        }
//Call Validate form method; pass all elements
    validateForm(div, name, address, city, fullState, zip,
        email, areaCode, prefix, suffix, genderChoice,
        courseChoice);
}

//Check all elements for null
function validateForm(div, name, address, city, fullState, zip,
                      email, areaCode, prefix, suffix, genderChoice,
                      courseChoice) {

    var RUN_OUTPUT = 1;

    function br() {
        return document.createElement('br');
    }

    if (name == null || name == "") {
        var nameError = "Name is not valid";
        var printNameError = document.createTextNode(nameError);
        var nameLabel = document.getElementById("nameError");
            nameLabel.appendChild(printNameError);
        RUN_OUTPUT = 0;
    }
    if (email == null || email == "") {
        var emailError = "Email is not valid";
        var printEmailError = document.createTextNode(emailError);
        var emailLabel = document.getElementById("emailError");
            emailLabel.appendChild(printEmailError);
        RUN_OUTPUT = 0;
    }
    if (areaCode == null || areaCode == "" || prefix == null || prefix == "" || suffix == null || suffix == "") {
        var phoneError = "Area Code is not valid";
        var printPhoneError = document.createTextNode(phoneError);
        var phoneLabel = document.getElementById("phoneError");
            phoneLabel.appendChild(printPhoneError);
        RUN_OUTPUT = 0;
    }
    if (address == null || address == "") {
        var addressError = "Address is not valid";
        var printAddressError = document.createTextNode(addressError);
        var addressLabel = document.getElementById("addressError");
            addressLabel.appendChild(printAddressError);
        RUN_OUTPUT = 0;
    }
    if (city == null || city == "") {
        var cityError = "City is not valid";
        var printCityError = document.createTextNode(cityError);
        var cityLabel = document.getElementById("cityError");
            cityLabel.appendChild(printCityError);
        RUN_OUTPUT = 0;
    }
    if (fullState == null || fullState == "") {
        var stateError = "State is not valid";
        var printStateError = document.createTextNode(stateError);
        var stateLabel = document.getElementById("stateError");
            stateLabel.appendChild(printStateError);
        RUN_OUTPUT = 0;
    }
    if (zip == null || zip == "") {
        var zipError = "Zip is not valid";
        var printZipError = document.createTextNode(zipError);
        var zipLabel = document.getElementById("zipError");
            zipLabel.appendChild(printZipError);
        RUN_OUTPUT = 0;
    }
    if (genderChoice == null || genderChoice == "") {
        var genderError = "Gender is not valid";
        var printGenderError = document.createTextNode(genderError);
        var genderLabel = document.getElementById("genderError");
            genderLabel.appendChild(printGenderError);
        RUN_OUTPUT = 0;
    }
    if (courseChoice == null || courseChoice == "") {
        var courseError = "No Courses!";
        var printCourseError = document.createTextNode(courseError);
        var courseLabel = document.getElementById("courseError");
            courseLabel.appendChild(printCourseError);
        RUN_OUTPUT = 0;
    }

    if (Boolean(RUN_OUTPUT) != false) {
        document.getElementsByClassName("errorField").textContent = "";

        runOutputForm(div, name, address, city, fullState, zip,
            email, areaCode, prefix, suffix, genderChoice,
            courseChoice);
    }
}

function runOutputForm(div, name, address, city, fullState, zip,
                       email, areaCode, prefix, suffix, genderChoice,
                       courseChoice) {

    function br() {
        return document.createElement('br');
    }

    var printName = document.createTextNode("Name: " + name + " ");
    var printEmail = document.createTextNode("Email: " + email + " ");
    var printPhone = document.createTextNode("Phone: " + areaCode + "-" + prefix + "-" + suffix);
    var printAddress = document.createTextNode("Address: " + address + " " + city + ", " + fullState.text + " " + zip);
    var printGender = document.createTextNode("Gender: " + genderChoice);
    var printCourses = document.createTextNode("Courses Taken: " + courseChoice + " ");

    div.appendChild(br());
    div.appendChild(printName);
    div.appendChild(br());
    div.appendChild(printEmail);
    div.appendChild(br());
    div.appendChild(printPhone);
    div.appendChild(br());
    div.appendChild(printAddress);
    div.appendChild(br());
    div.appendChild(printGender);
    div.appendChild(br());
    div.appendChild(printCourses);
    div.appendChild(br());

    var output = document.getElementById("output");

    if (output) {
        output.parentNode.replaceChild(div, output);
    } else {
        document.body.appendChild(div);
    }
}

我想只显示当前准确的消息，错误或有效输出，而不是两者。我的元素替换逻辑似乎已经消失了。我没有在这个项目中使用jQuery或innerHTML。请指教。

jsFiddle