是什么使我的页面内容负载突然消失了？

Question

我正在调整具有多个部分的网站中的表格。目标是当我们加载页面时，将出现初始输入，而其他输入只是在一个之前出现的，具有足够的值。 在第一页上，一切似乎都还好（我在原始内容中添加了更多输入），当我传递到第二页时，第一个输入似乎出现并突然消失，不允许用户填写该值，从而离开页面空白。 我不明白是什么使加载问题。以下是代码。

passo3.ejs

<div class="row">
    <div class="col-sm-12">    
        <div class="jumbotron">
            <!-- <h1><%= __('calculadora.title') %></h1> -->
            <h2><%= __('calculadora.subtitle_3_revestimentos') %></h2>
        </div>
    </div>

    <div class="alert alert-dark" style="display:none;"></div>
    <div class="alert alert-info" style="display:none;"></div>
    <div class="alert alert-warning" style="display:none;"></div>
    <div class="alert alert-danger" style="display:none;"></div>

    <div class="progress">    
        <div class="progress-bar progress-bar-dark" role="progressbar" aria-valuenow="4" aria-valuemin="0" aria-valuemax="100" style="width: <%= progressBar %>%"></div>
    </div>
        
    <div class="form-group col-sm-12 form-inline"></div> 

        <div class="form-group col-sm-1 form-inline col-margin"></div> 
        <div class="form-group col-sm-5 form-inline form-option-div">           
            <!-- image depends on option in step 1-->
            <div class="btn-image-div-absolute d-flex align-items-end">
                <img src="/img/calculadora_p3/fachada_<%= lang %>.png" class="btn-image-absolute rounded mx-auto image_overlay image_base">
                <img src="/img/calculadora_p3/fachada_ac.png" class="btn-image-absolute rounded mx-auto image_overlay ac" style="display:none;">
                <img src="/img/calculadora_p3/fachada_af.png" class="btn-image-absolute rounded mx-auto image_overlay af" style="display:none;">
            </div>
        </div>


        <div class="form-group col-sm-5 form-option-div">           
            <h3 class="form-subtitle"><%= __('calculadora.cobertura') %></h3>
            <!-- 10 --> 
            <% var _Q = {
                tabindex: 1,
                number: "10",
                name: "rev_tipo",
                hiddenOnStart: false,
                errorInput: false,
                additionalClasses: "form-control",
                units: ""
            }; %>
            <% include ./_question_typeB.ejs %>

            <!-- 10A --> 
            <% _Q = {
                tabindex: 2,
                number: "10A",
                name: "rev_outro",
                hiddenOnStart: true,
                errorInput: true,
                additionalClasses: "valid_number",
                units: "[kg/m<sup>2</sup>]"
            }; %>
            <% include ./_question_typeA.ejs %>
        

            <!-- 11 --> 
            <% _Q = {
                tabindex: 3,
                number: "11",
                name: "afmc",
                hiddenOnStart: true,
                errorInput: true,
                additionalClasses: "valid_selectize_number",
                units: "a<sub>c</sub>&nbsp;[m]"
            }; %>
            <% include ./_question_typeB.ejs %>

            

            <div class="part2" style="display:none;">
                <h3 class="form-subtitle"><%= __('calculadora.fachada') %></h3>
            
                <!-- [9] 12 (20) --> 
                <% _Q = {
                    tabindex: 4,
                    number: "12",
                    name: "ori_rev_fachada",
                    hiddenOnStart: false,
                    errorInput: false,
                    additionalClasses: "form-control",
                    units: ""
                }; %>
                <% include ./_question_typeB.ejs %>


                <!-- [10] 9 (31) --> 
                <% _Q = {
                    tabindex: 5,
                    number: "13",
                    name: "n_fachadas_abertas",
                    hiddenOnStart: true,
                    errorInput: false,
                    additionalClasses: "form-control",
                    units: ""
                }; %>
                <% include ./_question_typeB.ejs %>


                <!-- [11] 10 (32) --> 
                <% _Q = {
                    tabindex: 6,
                    number: "14",
                    name: "n_empenas_abertas",
                    hiddenOnStart: true,
                    errorInput: false,
                    additionalClasses: "form-control",
                    units: ""
                }; %>
                <% include ./_question_typeB.ejs %>


                <!-- [12] 11 (9) --> 
                <% _Q = {
                    tabindex: 7,
                    number: "15",
                    name: "rev_fachada",
                    hiddenOnStart: true,
                    errorInput: false,
                    additionalClasses: "form-control",
                    units: ""
                }; %>
                <% include ./_question_typeB.ejs %>
                

                <!-- 13 (10) --> 
                <% _Q = {
                    tabindex: 8,
                    number: "16",
                    name: "afmf",
                    hiddenOnStart: true,
                    errorInput: true,
                    additionalClasses: "valid_selectize_number",
                    units: "a<sub>f</sub>&nbsp;[m]"
                }; %>
                <% include ./_question_typeB.ejs %>

            
            </div> <!-- part 2 -->

            <div class="btn_submit_div" style="display:none;">
                <button tabindex="10" type="button" class="btn_submit btn btn-dark btn-md"><%= __('calculadora.seguinte') %></button>
            </div>

        </div><!-- form group -->
       

        



    </div><!-- row -->






    <div style="height: 70px; width:100%">
    </div>


    <input type="hidden" name="step" value="<%= step %>">
    <input type="hidden" name="arq" value="<%= calcData.arq %>">
    <input type="hidden" name="vao" value="<%= calcData.vao %>">
    <input type="hidden" name="h1" value="<%= calcData.h1 %>">
    <input type="hidden" name="hc" value="<%= calcData.hc %>">


    <div class="calculadora_inputs">

        <% if( typeof report != "undefined" ){ %>
            <form id="form_calculadora" name="form_calculadora" action="/calculadora" method="GET">
                <input id="reportId" type="hidden" class="" name="reportId" value="<%= report._id %>">
                <input id="nextStep" type="hidden" class="" name="nextStep" value="<%= +report.step +1 %>">
        <% } %>
                
        <input type="hidden" name="v" value="<%= calcData.v %>"><!-- calculated on server with step 2 inputs, needs to be here to be included in query string inputs -->
        <input type="hidden" class="sync_rev_tipo required" name="rev_tipo">
        <input type="hidden" class="sync_rev_outro required" name="rev_outro">
        <input type="hidden" class="sync_afmc required" name="afmc">
        <input type="hidden" class="sync_n_fachadas_abertas required" name="n_fachadas_abertas">
        <input type="hidden" class="sync_n_empenas_abertas required" name="n_empenas_abertas">
        <input type="hidden" class="sync_rev_fachada required" name="rev_fachada">
        <input type="hidden" class="sync_ori_rev_fachada required" name="ori_rev_fachada">
        <input type="hidden" class="sync_afmf required" name="afmf">
        
        <% if( typeof report != "undefined" ){ %>
            </form>
        <% } %>

    </div>
</div>

<script>resetCalculatorText = "<%=  __('resetCalculatorText') %>";</script>
<script src="/js/calculadora_passo<%= step %>.js"></script>

_question_typeb.ejs

<% 
var _visible = '', _errorPop = '', _errorPopClass='', _additionalClasses='', _selectOptions=[];
if( _Q.hiddenOnStart ) {
    _visible=`style="display:none"`;
}
    
if( _Q.errorInput ){
    let _content = __(`calculadora.q${_Q.number}.errorText`);
    
    _errorPop=`data-toggle="popover" data-trigger="manual" data-placement="left" data-content="${_content}" data-html="true" data-container=".calculator-input-group.step${_Q.number}"`;
   
    _errorPopClass = 'error-popover';
}

if( _Q.additionalClasses ){
    _additionalClasses = _Q.additionalClasses;
}

if(  __(`calculadora.q${_Q.number}.selectOptions`) ){
    _selectOptions = __(`calculadora.q${_Q.number}.selectOptions`);
}
%>

<h4 class="input_label step<%= _Q.number %>" <%- _visible %>><%= __(`calculadora.q${_Q.number}.inputLabel`) %></h4>
<div class="input-group calculator-input-group step<%= _Q.number %>" <%- _visible %>>
    
    <% console.log(_Q.units) %>
    <% if( _Q.units ){ %>
        <a class="<%= _errorPopClass %>"" <%- _errorPop %> > 
            <div class="input-group-prepend">
                <span class="input-group-text calculator-input-prepend"><%- _Q.units %></span>
            </div>
        </a>
    <% } %> 
    
    
    <select data-tab="<%= _Q.tabindex %>" class="sync_<%= _Q.name %> middle calculator-input <%= _errorPopClass %> <%- _additionalClasses %>" placeholder="<%= __(`calculadora.q${_Q.number}.inputPlaceholder`) %>" title="<%= __(`calculadora.q${_Q.number}.inputTitle`) %>" aria-label="<%= __(`calculadora.q${_Q.number}.inputTitle`) %>">
        <% console.log(_selectOptions.length) %>
        <% if( _selectOptions.length ){ %>
            <option selected disabled><%- __(`calculadora.escolhaUmaOpcao`) %></option>

        
            <% _selectOptions.forEach(function( eachOption){ %>
                <option value="<%= eachOption.val %>"><%- eachOption.title %></option>
            <% }) %>
        <% } %>    
    </select>
    
    
    <div class="input-group-append">
        <span class="input-group-text calculator-input-append">
        <a tabindex="99" class="btn btn-sm btn-link btn-block" data-html="true" data-toggle="popover" data-container="body" data-placement="left" title="<%= __(`calculadora.q${_Q.number}.helperTitle`) %>" data-content="<%= __(`calculadora.q${_Q.number}.helperContent`) %>"><i class="far fa-question-circle fa-lg"></i></a>
        </span>
    </div>

</div>

calculadora_passo3.js

 //store the instance of the selectize components
    var $selectize_8;
    var selectizeControl_8;

    var $selectize_13;
    var selectizeControl_13;


    $(document).ready(function() {

        
        
    
        //initialization
        function _init(){
            
            //add a property to help icon on Afmc so it can be added dynamicaly to help popover when clicked
            //after this add the event to the help button to get the aria-described with the id of the popover and manipulate the content
            //replacing ${1} by data-par1 value. Because this can be used anywhere i'm adding this event to main calculadoraFrontEnd.js file
            let afmc = (+$('[name="v"]').val() ).toFixed(2);
            let afmf = +$('[name="h1"]').val()-0.5;

            console.log(afmc);
            console.log(afmf);

            $('.step11 .input-group-append .btn-link').attr('data-par1', afmc );
            //same for afmf on step 16
            $('.step16 .input-group-append .btn-link').attr('data-par1', afmf );

            scrollTo($('header'));
        }


        








       //populate select box
        function populateSelect_8(){
          
             //destroy select if already exists
            if( selectizeControl_8){
                selectizeControl_8.destroy();
            }

            //initiate the selectize component and store it's instance
            $selectize_8 = $('select.sync_afmc').selectize( {
                options: calcularAfastamentoMadreCobertura(),
                valueField: 'val',
                labelField: 'title',
                searchField: 'title',
                sortField: function(item1, item2) {
                    return item1.value - item2.value;
                },
                createOnBlur: true,
                create: true,
                openOnFocus: true,
                onChange: function(input){
                    //prevent clear method (input becomes null) to trigger "not a number" again
                    if(!input) return;
                    
                    let length_v = $('[name="v"]').val();//calcularComprimentoViga();
                    //ignore +2 place decimals
                    let ratio = Math.round((length_v / input)*100)/100;

                   //check if the input exists in the original options calculation function
                   let originalOptions = calcularAfastamentoMadreCobertura();
                   let originalOption = false;
                   
                   if (originalOptions.filter(function(option) { return option.val === input; }).length > 0) {
                        originalOption= true;
                   }

                   if( !$.isNumeric(input)  ||  (Math.floor(ratio) != ratio && !originalOption ) ) { 
                        //showMessage("Error - Not valid number", "alert-danger");
                        showMessage( $(this.$wrapper[0]) );
                        //clear last added value
                        selectizeControl_8.clear();
                        //remove last added value from list
                        selectizeControl_8.removeOption(input);
                        //reopen dropdown
                        selectizeControl_8.open();
                    }else{
                        //clear error message
                            clearMessage( $(this.$wrapper[0]) );
                    }
                },
                onInitialize: function(){
                    $(this.$wrapper[0]).find(":input").attr('tabindex', $(this.$wrapper[0]).parent().find('.selectized').data('tab') ) ;    
                },
                onFocus: function(){
                    showOnlyTheRightImage("ac");
                },
                render: {
                        item: function(item, escape) {
                            return '<div>' +
                                (item.title ? '<span class="selectize_title">' + escape(item.title) + '</span>' : '') +
                            '</div>';
                        },
                        option: function(item, escape) {
                            return '<div>' +
                                '<span class="selectize_title"><strong>' + (item.title ? escape(item.title) : escape(item.val)) + '</strong>' +
                                (item.subtitle ? '<span class="selectize_subtitle">&emsp;' + escape(item.subtitle) +  '</span>' : '') +  '</span>'
                            '</div>';
                        },
                }
         });//options

            //store object instnace so we can handle events
            selectizeControl_8 = $selectize_8[0].selectize;
          
        }//function

        









        //populate select box
        function populateSelect_13(){
            
            let af_array = [];
            

             //destroy select if already exists
            if( selectizeControl_13){
                selectizeControl_13.destroy();
            }

            //initiate the selectize component and store it's instance
            $selectize_13 = $('select.sync_afmf').selectize( {
                options: calcularAfastamentoMadresFachada(),
                valueField: 'val',
                labelField: 'title',
                searchField: 'title',
                sortField: function(item1, item2) {
                    return item1.value - item2.value;
                },
                createOnBlur: true,
                create: true,
                openOnFocus: true,
                onChange: function(input){
                   //prevent clear method (input becomes null) to trigger "not a number" again
                   if(!input) return
                    
                   //h from form inputs
                   let length_h = parseFloat( $('[name="h1"]').val() );
                   //ignore +2 place decimals
                   let ratio = Math.round((length_h / input)*100)/100;
                   
                   //check if the input exists in the original options calculation function
                   let originalOptions = calcularAfastamentoMadresFachada();
                   let originalOption = false;
                   
                   if (originalOptions.filter(function(option) { return option.val === input; }).length > 0) {
                        originalOption= true;
                   }

                   if( !$.isNumeric(input)  ||  (Math.floor(ratio) != ratio && !originalOption ) ) { 
                        
                        showMessage( $(this.$wrapper[0]) );
                        //clear last added value
                        selectizeControl_13.clear();
                        //remove last added value from list
                        selectizeControl_13.removeOption(input);
                        //reopen dropdown
                        selectizeControl_13.open();
                    }else{
                        //clear error message
                        clearMessage( $(this.$wrapper[0]) );
                    }
                },
                onInitialize: function(){
                    $(this.$wrapper[0]).find(":input").attr('tabindex', $(this.$wrapper[0]).parent().find('.selectized').data('tab') ) ;  
                },
                onFocus: function(){
                    showOnlyTheRightImage("af");
                },
                render: {
                        item: function(item, escape) {
                            return '<div>' +
                                (item.title ? '<span class="selectize_title">' + escape(item.title) + '</span>' : '') +
                            '</div>';
                        },
                        option: function(item, escape) {
                            return '<div>' +
                                '<span class="selectize_title"><strong>' + (item.title ? escape(item.title) : escape(item.val)) + '</strong>' +
                                (item.subtitle ? '<span class="selectize_subtitle">&emsp;' + escape(item.subtitle) +  '</span>' : '') +  '</span>'
                            '</div>';
                        },
                }
         });//options

            //store object instnace so we can handle events
            selectizeControl_13 = $selectize_13[0].selectize;
          
        }//function









        //allow only numbers and decimal point
        $('.group_option_inputs_div').keypress('div.valid_selectize_number', function(e) {
        
            //only allow number and dot characters
            if ( (e.which < 48 || e.which > 57) && e.which !== 46) {
                e.preventDefault();
            }
            //dont allow paste
        }).on('paste', function(e) {
            e.preventDefault();
        });




        $('.calculator-input').on('focus', function(){
            //hide all except base image
            $('.image_overlay').not('.image_base').hide();
        });





        //FLOW -------------------------------------------------------
        // Step 10 only to show 10A
        $('[name="rev_tipo"]').on('input', function(){
            //if valid activate next input
            if( $(this).val() == '6' ){
                $('.step10A').show();
            }else{
                $('.step10A').hide();
                //also clear rev_outro input (only for option 6 - outro)
                $('.sync_rev_outro').val('').trigger("change");
            }
        });


        // Step 10, 10A
        $('[name="rev_tipo"], [name="rev_outro"]').on('input', function(){
            
            let tipo = $('[name="rev_tipo"]').val();
            let outro = $('[name="rev_outro"]').val();

            let valid = true;
            
            //nothing selected or "other" without specifing what "other" is
            if( tipo == '' || (tipo == '6' && outro == '') ){
                valid = false;
            }

            //if valid activate next input
            if( !valid ){
                $('.step10, .step11, .step12, .step13, .step14, .step15, .step16').hide();
                $('.btn_submit_div').hide();
            }else{
                $('.step10').show().trigger("input");
                populateSelect_8();
                //scrollTo( $('.step8') );
            }
        });








        // step 8
        $('[name="afmc"]').on('input', function(){
            if($(this).val() == ''){
                $('.step11, .step12, .step13, .step14, .step15, .step16').hide();
                $('.btn_submit_div').hide();
            }else{
                //show parte 2 of form
                $('.part2').show();
                $('.step11').show().trigger("input");
                //scrollTo( $('.step9') );
            }
        });






         // step [9] 12 (10)
         $('[name="ori_rev_fachada"]').on('input', function(){
            $('.step12, .step13, .step14, .step15, .step16').hide();
            $('.btn_submit_div').hide();

            if( $(this).val() != ''){
             
                if( $(this).val() == '0' ||  $(this).val() == '1' ){ 
                    $('.step12').show().trigger("input");
                    
                }else{
                    $('.sync_rev_fachada').val('');
                    $('.sync_n_empenas_abertas').val('');
                    $('.sync_n_fachadas_abertas').val('');
                    //also clear afmf input (only for option 0 - vertical)
                    $('.sync_afmf').val('');

                    $('.btn_submit_div').show();
                    //scrollTo( $('.btn_submit_div') );
                   
                 }  
            }
        });





        // step [10] 9 (31)
        $('[name="n_fachadas_abertas"]').on('input', function(){
            
            $('.step13, .step14, .step15, .step16').hide();
            $('.btn_submit_div').hide();
            
            if($(this).val() != ''){
                $('.step13').show().trigger("input");
                //scrollTo( $('.step10') );
            }
        });








        // step [11] 10 (32)
        $('[name="n_empenas_abertas"]').on('input', function(){
            
            $('.step14, .step15, .step16').hide();
            $('.btn_submit_div').hide();
            
            if( $(this).val() != ''){
                $('.step14').show().trigger("input");
            }
        });







        // step [12] 11 (9)
        $('[name="rev_fachada"]').on('input', function(){
            if( $(this).val() == ''){
                $('.step15, .step16').hide();
                $('.btn_submit_div').hide();
            }else{
                //if orientação do revestimento = horizontal, afmf will not be required
                if( $('.sync_ori_rev_fachada').val() == '1' ){
                    $('.sync_afmf').val('');
                    $('.step15').hide();
                    $('.btn_submit_div').show();
                    //scrollTo( $('.btn_submit_div') );
                }else{
                    populateSelect_13(); 
                    $('.step15').show().trigger("input"); 
                    $('.btn_submit_div').hide(); 
                }

                
                //scrollTo( $('.step12') );
            }
        });
        





       



        // step 13 (10)
        $('[name="afmf"]').on('input', function(){
            if( $(this).val() == ''){
                $('.btn_submit_div').hide();
            }else{
                $('.btn_submit_div').show();
                //scrollTo( $('.btn_submit_div') );
            }
        });
        //------------------------------------------------------------




        

        function calcularAfastamentoMadreCobertura(){

            let rev = $('[name="rev_tipo"]').val(); //defined in this form
            let arq = $('[name="arq"]').val();
            let vao = $('[name="vao"]').val();
            let h = $('[name="h"]').val();
            let hc = $('[name="hc"]').val();
            let ret = [];
            
            let A = 1.0; //caso para arq = 2 e 3
            let B = 3.0; //caso o revestimento da cobertura seja qq tipo de sandwich
            
            if(arq == "1"){
                A = 0.5;
            }else if(arq == "4"){
                A = 2.0;
            }

            if(rev == "0"){//Chapa Simples - Bac Acier
                B = 2.0;  
            }else if(rev == "1" || rev == "6" ){//fotovoltaico e outro
                B = 1.6;
            }

            //suggest more values
            let variation = [0, 1, 2];
            //this will be the suggested options available to the user in the select box
            let suggested = [];

            //calculate options and add them to suggested array
            for(let i=0; i<variation.length; i++){
                
                let distanciaViga = Math.sqrt( (vao * A)**2 + (hc - h)**2 ) - 0.5;
                let afmc = distanciaViga / ( Math.ceil( (distanciaViga / B) + variation[i] ) );
    
                let result = parseFloat( afmc ).toFixed(2);
    
                suggested.push({val:result, title:result });
            }

            return suggested;
        }







        function calcularAfastamentoMadresFachada(){
            //tipo de revestimento da fachada ( 0=chapa simples, 1=painael sandwich, 2=outro)
            let rev_fachada = $('[name="rev_fachada"]').val();
            //altura dos pilares
            let h = $('[name="h"]').val();
            //look for values close to this (don't know why this specifically)
            
            let ret = [];
            let constant = 3; //other cases then "chapa simples"
            
            if( rev_fachada === '0') constant = 2;

            let calc = parseFloat( (h - 0.5) / Math.ceil( (h - 0.5)/constant ) ).toFixed(2);
        
            ret.push({val:calc , title:calc})
            
            return ret;
        }







        //hide all overlay images except the one with the specific class to the question on focus
        function showOnlyTheRightImage(specificClass){
            $('.image_overlay').not('.image_base').hide();
            $('.image_overlay.'+specificClass).show();
        }




       
        //initialize stuff
        setTimeout(function() { 
            _init();
        }, 10);//only enough for this to be last

    });//document ready

感谢您的帮助