双重答案输出

Question

在这个JS的某个地方，我正在使用需求编辑，而且我不够JS Savvy来解决我的困境！

我有一组单选按钮，组中的最后一个是“其他”。选择后，将显示一个文本字段以供输入。问题是输出......结果现在为这一个问题列出2个单独的答案。具体问题是“房屋类型”。表格结果显示：“房屋类型：未知”和“房屋类型：用户输入的答案”。如何更正这一点，以便只列出文本字段答案？

fyi：我不希望JS专门针对“其他”进行编辑，因为此设置在其他地方实现，而按钮并不总是显示隐藏表单元素的“其他”。对于前者我有另一个区域/单选按钮“是”，如果选择，将显示其他表单问题。

 https://jsfiddle.net/flipflopmedia/rLuygygm/20/

相关代码：

/**
* Class for getting form content
*/
class FormContent{

/**
 * Create new form content object
 *
 * @param {HTMLFormElement} formElement Single form element
 */
constructor(formElement){
    /**
     * Real form element
     *
     * @type {HTMLFormElement}
     */
    this.realForm = formElement;

    /**
     * Selector for elements which will be used to read and display data (like jQuery selector: # for IDs, . for classes and so on).
     * <br />
     * Separate different elements with  commas
     *
     * @type {string}
     */
    this.inputSelectors = "input, textarea, select";

    /**
     * Submit button selector (like jQuery selector: # for IDs, . for classes and so on)
     *
     * @type {string}
     */
    this.submitButtonSelector = "button[type='button']";

    /**
     * Output section selector (like jQuery selector: # for IDs, . for classes and so on)
     * <br />
     * Separate different elements with  commas
     *
     * @type {string}
     */
    this.outputSelector = "output";

    /**
     * Disabled types for input element.
     *
     * @type {Array}
     */
    this.disabledTypes = ["button", "reset", "submit"];


    /**
     * Input elements node list (created by inputSelectors)
     *
     * @see inputSelectors
     * @type {NodeList}
     */
    var inputElements = formElement.querySelectorAll(this.inputSelectors);

    /**
     * Get input elements
     *
     * @see inputElements
     */
    this.getInputElements = function(){ return inputElements; };

    /**
     * Submit button
     *
     * @see submitButtonSelector
     * @type {Element}
     */
    var submitButton = formElement.querySelector(this.submitButtonSelector);

    /**
     * Get submit button
     *
     * @see submitButton
     */
    this.getSubmitButton = function(){ return submitButton; };

    /**
     * Output sections (where the form data is displayed)
     *
     * @see outputSelector
     * @type {Element}
     */
    var outputSections = formElement.querySelectorAll(this.outputSelector);

    /**
     * Get output sections
     *
     * @see outputSections
     */
    this.getOutputSections = function(){ return outputSections; };


    /**
     * Empty input's alternative (print) value
     *
     * @type {string}
     */
    this.emptyValueMessage = "Unknown";

    /**
     * Error message (when there is empty required fields)
     *
     * @type {string}
     */
    this.errorMessage = "<h4 style='color:#FF0000;'>Please fill all the required inputs!</h4>";

    /**
     * Instance for this class
     *
     * @type {FormContent}
     */
    var thisInstance = this;


    if(submitButton && outputSections){
        submitButton.onclick = function(){
            thisInstance.onSubmitButtonClick();
        };
    }
}

/**
 * When submit button is clicked
 */
onSubmitButtonClick(){
    var outputMessage = (this.areRequiredInputsFilled()) ? this.getFormattedFormContent() : this.errorMessage;

    this.printToOutput(outputMessage);
}

/**
 * Are all the required inputs/fields filled
 *
 * @return {boolean}
 */
areRequiredInputsFilled(){
    for(var node of this.getInputElements()){
        if(node.required && !node.value){
            return false;
        }
    }

    return true;
}

/**
 * Print/display form data to output element
 *
 * @see  getOutputSections
 */
printToOutput(content){
    for(var output of this.getOutputSections()){
        output.innerHTML = content;
    }
}

/**
 * Get form content/data which is checked and formatted
 *
 * @return {string} Form content
 */
getFormattedFormContent(){
    var formContent = "";

    var formInputsWithValue = this.getFormInputsWithValue();



    for(var input of formInputsWithValue){
        var printValue = input.data || input.value || this.emptyValueMessage;
        var printName = input.name;



        formContent += "<b>" + printName + "</b>: " + printValue + "<br />";
    }

    return formContent;
}

/**
 * Get all the inputs with value inside the form
 * 
 * @see getInputElements()
 * @return {Array} Inputs with value
 */
getFormInputsWithValue(){
    var inputsWithValue = [];

    for(var input of this.getInputElements()){
        if(!this.disabledTypes.includes(input)){
            if(input.type === "radio"){
                if(input.checked){
                    inputsWithValue.push(input);
                }
            }else if(input.type === "checkbox"){
                input.value = (input.checked) ? true : false;
                inputsWithValue.push(input);
            }else if(input.multiple){
                inputsWithValue.push(this.getMultipleInputElement(input));
            }else if(input.value || input.innerHTML){
                inputsWithValue.push(input);
            }else{
                inputsWithValue.push(input);
            }
        }
    }

    return inputsWithValue;
}

/**
 * Get input which has attribute multiple
 *
 * @param {HTMLInputElement} multipleInput Input with attribute multiple
 *
 * @return {HTMLInputElement} Input instance
 */
getMultipleInputElement(multipleInput){
    var inputInstance = document.createElement("input");
    inputInstance.name = multipleInput.name;

    var values = [];

    if(multipleInput.type !== "file"){
        for(var option of multipleInput){
            if(option.selected){
                values.push(option.value);
            }
        }
    }else{
        for(var file of multipleInput.files){
            values.push(file.name);
        }
    }

    inputInstance.data = values.toString();

    return inputInstance;
}
}

var forms = document.getElementsByTagName("form");

for(var form of forms){
new FormContent(form);
}