如何使用动态输入字段的值进行计算？

Question

我的 html 表单代码有点问题...

在我的代码中，动态生成的输入字段很少。在动态生成的每个输入字段中，都有一些数值。我需要和他们做一些数学计算。

="PE+ROCE+(2-SG)-(4-DY/2)"

这是我的计算模式。其中，PE、ROCE 等是生成的动态输入字段的 ID。

使用生成的动态输入字段的值，我需要执行上述计算。 当用户单击“计算”输入按钮时，必须执行此计算。 然后，上面的最终计算值将显示在我的表单代码底部的输出标签中。 我试图自己解决这个问题。但不幸的是，这项任务失败了。

现在有人可以帮我解决这个问题。 我将不胜感激...

这是我的完整代码..

    // define the headings here, so we can access it globally
    // in the app
    let headings = []

    // appending the created HTML string to the DOM
    function initInputs(headingList) {
      jQuery(".fields").append(createInputsHTML(headingList))
    }

    // the HTMLT template that is going to be appended
    // to the DOM
    function createInputsHTML(headingList) {
      let html = ''
      headingList.forEach(heading => {
        if (heading !== 'Company') {
          html += `<label for="${heading}">${heading}: </label>`
          html += `<input id="${heading}">`
          html += '<br>'
        }
      })

      return html
    }

    // receiving data
    // this data arrives later in the app's lifecycle,
    // so it's the best to return a Promise object
    // that gets resolved (check JS Promise for more information)
    function getJSON() {
      return new Promise(resolve => {
        jQuery.get("https://cors-anywhere.herokuapp.com/www.coasilat.com/wp-content/uploads/2019/06/data-1.txt", function(data) {
          resolve(JSON.parse(data))
        });
      })
    }

    // processing raw JSON data
    function processRawData(data) {
      return new Promise(resolve => {
        const companyData = []
        // creating data array
        // handling multiple sheets
        Object.values(data).forEach((sheet, index) => {
          sheet.forEach((company, i) => {
            companyData.push({ ...company
            })
            // create headings only once
            if (index === 0 && i === 0) {
              Object.keys(company).forEach(item => {
                headings.push(item.trim())
              })
            }
          })
        })
        resolve(companyData)
      })
    }

    $(async function() {

      let lists = [];

      function initAutocomplete(list) {
        const thisKey = 'Company'
        $("#company").autocomplete('option', 'source', function(request, response) {
          response(
            list.filter(item => {
              if (item[thisKey].toLowerCase().includes(request.term.toLowerCase())) {
                item.label = item[thisKey]
                return item
              }
            })
          )
        })
      }

      $("#company").autocomplete({
        minLength: 3,
        source: lists,
        focus: function(event, ui) {
          // the "species" is constant - it shouldn't be modified
          $("#company").val(ui.item.Company);
          return false;
        },
        select: function(event, ui) {
          // handling n number of fields / columns
          headings.forEach(heading => {
            $('#' + heading).val(ui.item[heading])
          })
          return false;
        }
      });

      // starting data download, processing and usage
      getJSON()
        .then(json => {
          return processRawData(json)
        })
        .then(data => {
          // just so we see what data we are using
          console.log(data)
          // make the processed data accessible globally
          lists = data
          initAutocomplete(lists)
          initInputs(headings)
        })

    });

  
    

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
    <div class="ui-widget">
      <form id="frm1">
        <label for="company">Company: </label>
        <input id="company"><br />
        <div class="fields"></div>

<input type="submit" id="calculate" value="Calculate">
   
<p>Final Amount <output name="amount" for="calculation">0</output></p>
      </form>
    </div>
    

Answer 1

尝试每个输入循环

 $("#Calculate").click(function(){
        var peVal,roceVal,sgVal,dyVal;
    jQuery(".fields input").each(function (){
        var idHeading=$(this).attr("id");

        if(idHeading=="Your ID for PE input"){
            peVal=parseInt($(this).val());
        }

        if(idHeading=="Your ID for ROCE input "){
            roceVal=parseInt($(this).val());
        }

        if(idHeading=="Your ID for SG input"){
            sgVal=parseInt($(this).val());
        }

        if(idHeading=="Your ID for DY input"){
            dyVal=parseInt($(this).val());
        }

    });
    var output=peVal+roceVal+(2-sgVal)-(4-dyVal/2);
});