我怎样才能自动计算（第一个输入）和（第二个输入）等......并在计算过程后对javascript中的所有输入求和

Question

let button = document.querySelector(".btn");
let buttonReset = document.querySelector(".reset");
let buttonCalulate = document.querySelector(".calculate");


button.addEventListener("click",function(){
  const quantity = parseInt(document.querySelector("#myNumber").value);  //Declare input
  if(quantity >= 0) {

      for (var i=1; quantity>=i ; i++){

    let length = "<p class='first'>"+ i +". Length : <input type='number' class='second"+i+"' value='' /> </p>";
    let height = "<p class='first'> Height : <input type='number' class='second"+i+"' value='' /> </p>";
    let width =  "<p class='first'> Width : <input type='number' class='second"+i+"' value='' /> </p>";
    let boxQuantity =  "<p class='first'> Total Box : <input type='number' class='second"+i+"' value='' /> </p>";
    let inputTotal = length + height + width + boxQuantity ;
    
    document.querySelector(".calBox").innerHTML += inputTotal;
    }
    document.querySelector(".resetDiv").style.display = "flex";
    button.disabled=true;
  }
  
});

  buttonReset.addEventListener("click", function(){
    location.reload(true);
  });



  buttonCalulate.addEventListener("click", function(){
    let calQuantity = parseInt(document.querySelector("#myNumber").value);  
  if (calQuantity >0 ){
    
    for (var i=1; calQuantity>=i ; i++){
      

      let calLength = parseInt(document.querySelectorAll(".second"+i)[0].value);
      let calHeight = parseInt(document.querySelectorAll(".second"+i)[1].value);
      let calWidth =  parseInt(document.querySelectorAll(".second"+i)[2].value);
      let calBoxQuantity =  parseInt(document.querySelectorAll(".second"+i)[3].value);
      var calFirstStep = (calLength * calHeight * calWidth ) * calBoxQuantity;
      var calVolumeResult = calFirstStep / 6000; 
    }
    document.querySelector(".volumeResult").innerHTML = "Volume Weight : "+calVolumeResult+"kg";
    let cbmVolume = calVolumeResult * 0.006;
    document.querySelector(".cbmVolume").innerHTML = "CBM : " + cbmVolume;

  }

});

那是我的js代码问题只是最后一个值出来了！我的计划是首先询问货箱，然后计算不同的货箱尺寸，然后自动开始计算 (LxWxH)/6000 和 ((LxWxH)/6000 ) *0.006 ，然后所有将第一个计算和第二个相加计算等等....之后最终结果就会出来.

let calLength = parseInt(document.querySelectorAll(".second1")[0].value);       

let calHeight = parseInt(document.querySelectorAll(".second1")[1].value);       

let calWidth =  parseInt(document.querySelectorAll(".second1")[2].value);

首先计算总和

let calLength = parseInt(document.querySelectorAll(".second2")[0].value);       

let calHeight = parseInt(document.querySelectorAll(".second2")[1].value);       

let calWidth =  parseInt(document.querySelectorAll(".second2")[2].value);

获得第二次总计算等...并对所有计算求和。

问题是我们不知道有多少用户框将输入它可以是10个输入形式或20个可能如此，所以不能制作变量来修复它会随着用户输入请求而改变。

如果您想了解我的代码的所有信息，我可以上传所有索引，因为我仍在学习，无法弄清楚如何解决。我应该为此创建一个数组还是我可以做其他什么？

我试图创建一个数组来求和
为每个查找自动创建变量但失败了，这就是我在这里的原因

Answer 1

享受吧。

<div id="example_container">
  <label>
    <span>Enter the total number of cargo spaces:</span>
    <input class="total_spaces" type="number">
  </label>
  <button class="total_spaces">OK</button>
  
  <div class="all_fields hide">
    <div class="cargo_row_template flex">
      <span class="row_number"></span>
      <span class="txt">Length</span>
      <input class="length" type="number">
      <span class="txt">Height</span>
      <input class="height" type="number">
      <span class="txt">Width</span>
      <input class="width" type="number">
      <span class="txt no-wrap">Total Boxes:</span>
      <input class="total_boxes" type="number">
    </div>  
  </div>
  
  <div class="flex">
    <button class="calculate">Calculate</button>
  </div>
  
</div>

// wait for dom to be built before running this javascript
document.addEventListener('DOMContentLoaded', () => {
    
  const updateCalculations = () => {
    const all_cargo_rows = document.querySelectorAll('.cargo_row_template');
    const totals = [...all_cargo_rows].map(($cargo_row) => {
        // get numerical value of each field (if blank then use 0)
        const length = Number($cargo_row.querySelector("input.length").value) || 0;
      const height = Number($cargo_row.querySelector("input.height").value) || 0;
        const width = Number($cargo_row.querySelector("input.width").value) || 0;
      const total_boxes = Number($cargo_row.querySelector("input.total_boxes").value) || 0;
      console.log(length, height, width, total_boxes);

            return (length*width*height)/6000;
    });
    console.log(totals);
  }

  const createFields = (num_of_fields) => {
    const $cargo_row_template = document.querySelector('.cargo_row_template');
    const $all_fields = document.querySelector('.all_fields');
    
    // clear out all rows (if any)
    emptyDiv($all_fields);
    
    // create a clone for each cargo space needed to be built.
    const new_fields = Array.from({length: num_of_fields}, (_, i) => {
        // clones row
      const $clone = $cargo_row_template.cloneNode(true);
      $clone.querySelector('.row_number').textContent = `${i+1}.`;
      return $clone;
    });
    $cargo_row_template.remove();
    $all_fields.append(...new_fields);
    $all_fields.classList.remove('hide');
  }

    const initEventListeners = () => {
    const $total_spaces_btn = document.querySelector('button.total_spaces');
    $total_spaces_btn.addEventListener('click', () => {
      const $total_spaces = document.querySelector('input.total_spaces');
      createFields($total_spaces.value);
    });
    const $calculate = document.querySelector("button.calculate");
    $calculate.addEventListener('click', () => {
        updateCalculations();
    })
  }
  
  const emptyDiv = ($element) => {
    // removes all elements within a div
    while ($element.firstChild) $element.firstChild.remove();
  }
  
  const init = () => {
    // attach all initial event listeners
    initEventListeners();
  }

    // start program
    init();
  
  // NOTE I use $ for DOM elements, camelCase for function names and snake_case for variable names
});

.flex {
  display: flex;
}

.no-wrap {
  white-space: nowrap;
}

示例： https://jsfiddle.net/q3h05u8e/2/