计算所有显示的输入值（未隐藏），其中包含javascript值

Question

在图中，您可以看到每列上有三个输入，除了最后一个输入数据，我想表示第一列的输入数“Configuratie panouri“，默认情况下是隐藏的，并且只有在需要时才用javascript显示。在我的情况下，在最后的输入中，我应该得到数字3，因为在第一列中有3个输入显示为javascript。

Inputs

HTML代码：

<div class="input-group date col-xs-4" id="PanouriFinale"> 
     <label>Configurație panouri</label> 
     <input type="text" class="form-control centerElement" name="SuperiorPanel" id="SuperiorPanel" readonly style="display: none; border: 2px solid white;"> 
     <input type="text" class="form-control centerElement" name="Intermediar3Panel" id="Intermediar3Panel" readonly style="display: none; border: 2px solid white;"> 
     <input type="text" class="form-control centerElement" name="Intermediar2Panel" id="Intermediar2Panel" readonly style="display: none; border: 2px solid white;"> 
     <input type="text" class="form-control centerElement" name="Intermediar1Panel" id="Intermediar1Panel" readonly style="display: none; border: 2px solid white;"> 
     <input type="text" class="form-control centerElement" name="InferiorPanel" id="InferiorPanel" readonly style="display: none; border: 2px solid white;"> 
    </div> 

和Javascript：

if (Height >= 1845 && Height <= 3000) 
     { 
      $.ajax({ 
       url: "includes/calculator/inferiorPanel.php", 
       data: { height: Height }, 
       type: 'POST', 
       cache: false, 
       success: function(result){ 
        $("#InferiorPanel").show().val(result); 
        $("#InferiorPanel2").show().val(result); 
        $("#PVInferior").show(); 
        $("#FInferior").show(); 
      }}); 

      $.ajax({ 
       url: "includes/calculator/Intermediar1Panel.php", 
       data: { height: Height }, 
       type: 'POST', 
       cache: false, 
       success: function(result){ 
        $("#Intermediar1Panel").show().val(result); 
        $("#Intermediar1Panel2").show().val(result); 
        $("#PVIntermediar1").show(); 
        $("#FIntermediar1").show(); 
      }}); 

      $.ajax({ 
       url: "includes/calculator/Intermediar2Panel.php", 
       data: { height: Height }, 
       type: 'POST', 
       cache: false, 
       success: function(result){ 
        if(result === '0') { 
         $("#Intermediar2Panel").hide(); 
         $("#Intermediar2Panel2").hide(); 
        } else 
        { 
         $("#Intermediar2Panel").show().val(result); 
         $("#Intermediar2Panel2").show().val(result); 
         $("#PVIntermediar2").show(); 
         $("#FIntermediar2").show(); 
        } 
      }}); 

      $.ajax({ 
       url: "includes/calculator/Intermediar3Panel.php", 
       data: { height: Height }, 
       type: 'POST', 
       cache: false, 
       success: function(result){ 
        if(result === '0') { 
         $("#Intermediar3Panel").hide(); 
         $("#Intermediar3Panel2").hide(); 
        } else 
        { 
         $("#Intermediar3Panel").show().val(result); 
         $("#Intermediar3Panel2").show().val(result); 
         $("#PVIntermediar3").show(); 
         $("#FIntermediar3").show(); 
        } 
      }}); 

      var InferiorPanel2 = document.getElementById('InferiorPanel2'); 
      var Intermediar1Panel2 = document.getElementById('Intermediar1Panel2'); 
      var Intermediar2Panel2 = document.getElementById('Intermediar2Panel2'); 
      var Intermediar3Panel2 = document.getElementById('Intermediar3Panel2'); 

      $.ajax({ 
       url: "includes/calculator/SuperiorPanel.php", 
       data: { height: Height }, 
       type: 'POST', 
       cache: false, 
       success: function(result){ 
      $("#SuperiorPanel").show().val(result); 
      $("#SuperiorPanel2").show().val(Height - InferiorPanel2.value - Intermediar1Panel2.value - Intermediar2Panel2.value - Intermediar3Panel2.value); 
      }}); 
      $("#PVSuperior").show(); 
      $("#FSuperior").show(); 
      var totalP = $('#PanouriFinale input').filter(function() { 
       return $(this).css('display') !== 'none'; 
      }).length; 
      $("#totalPanouri").val(totalP); 
      return false; 
     } else 
     { 
      document.getElementById('height').style.borderColor = "red"; 
      document.getElementById('erori').innerHTML = "<span style='color: red;'>Introdu o valoare cuprinsă între 1845 și 3000mm!</span>"; 
      return false; 
     } 

正如你可以看到，所有的输入是隐藏的，但在需要的时候使用javascript将被显示。我想要的只是计算在第一列“Configuratie panouri”中有多少个可见输入，并将其显示在图片的最后一个输入中。

Answer 1

如果我理解正确你的问题：

// Gets all inputs with class name 'centerElement' 
var inputsIWant = panouriFinale.getElementsByClassName('centerElement'); 
var inputsIWantLn = inputsIWant.length; 

var numberOfVisibleInputs = 0; 
for (var i = 0; i < inputsIWantLn; i++) { 

    // Goes through each input to see if display is set to none 
    if (inputsIWant[i].style.display == "none") { 
     numberOfVisibleInputs++; 
    } 
} 

// Logs the number of inputs that aren't hidden 
console.log(numberOfVisibleInputs);