JavaScript + JQUERY：根据两个输入变量进行计算

Question

简介

我需要在表中的两个td元素中计算给定的两个数字。

我的桌子看起来像这样：

我需要进行以下计算，并将结果自动计入小时数。

相关的计算如下，并且现在已硬编码到“使用的小时数”列中，因为我不知道如何通过Prognose exp和Prognose mail中的用户输入来进行计算

var th = document.createElement('th');
th.className = "hours_used";
var text = document.createTextNode("Hours used")
th.appendChild(text);
row.appendChild(th);

var th = document.createElement('th');
th.className = "prognose_eks";
th.id = "digit_fast_header"
var text = document.createTextNode("Prognose exp")
th.appendChild(text);
th.style.display = "none";
row.appendChild(th);

var th = document.createElement('th');
th.className = "prognose_mail";
th.id = "digit_fast_header"
var text = document.createTextNode("Prognose mail")
th.appendChild(text);
th.style.display = "none";
row.appendChild(th);

var td = document.createElement('td');
td.className = "hoursUsed";
td.innerHTML = "<input type='number' disabled='disabled' id='result'>"
tr.appendChild(td);

var td = document.createElement('td');
td.className = "inputEks";
td.id = "inputEks" 
td.innerHTML = "<input type='number' class='input1' name = 'inpt[]' >";
tr.appendChild(td);

var td = document.createElement('td');
td.className = "inputMail";
td.id = "inputMail" 
td.innerHTML = "<input type='number' class='input2' name = 'inpt[]' >";
tr.appendChild(td);


var GNS_EKS_TIME = 9;
var GNS_MAIL_TIME = 9;
TimeSum = (("#inputEks") / GNS_EKS_TIME) + (("#inputMail") / GNS_MAIL_TIME)
console.log("########### TEST ##############" + parseInt(TimeSum))
alert("Test" + TimeSum)

Answer 1

1）您需要选择输入元素并获取其实际值。仅输入('#inputEks')不会获得元素的值。

您是否打算键入$('#inputEks')（JQuery选择器）？

2）您还需要将这些值解析为实际的整数，因为输入元素将为您提供一个字符串，而乘法运算则希望您使用数字。

var GNS_EKS_TIME = 9;
var GNS_MAIL_TIME = 9;
document.querySelector( 'button' ).addEventListener( 'click', function( event ) {
  var inputEks = parseInt( document.querySelector( '.input1' ).value, 10 );
  var inputMail = parseInt( document.querySelector( '.input2' ).value, 10 );
  var sum = ( inputEks / GNS_EKS_TIME ) + ( inputMail / GNS_MAIL_TIME );
  alert( `Test: ${ sum }` );
});

<table>
  <thead>
    <tr>
      <th>Hours used</th>
      <th>Prognose exp</th>
      <th>Prognose mail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>133</td>
      <td>
        <input type="number" class="input1" name="inpt[]" value="300">
      </td>
      <td>
        <input type="number" class="input2" name="input[]" value="900">
      </td>
    </tr>
  </tbody>
</table>
<button>Calculate</button>

Answer 2

您需要那些东西 1.首先将输入字段保存在变量中 2.然后，当输入中的数据发生更改时，使用更改或输入事件来触发代码 3.使用input.value来输入文本并进行解析

您不需要调用从计算中获得的数字的parseInt。

// code that creates variables that where not in you snippet
var tr = document.querySelector('tbody tr');
var row = document.querySelector('thead tr');

var th = document.createElement('th');
th.className = "hours_used";
var text = document.createTextNode("Hours used")
th.appendChild(text);
row.appendChild(th);

var th = document.createElement('th');
th.className = "prognose_eks";
th.id = "digit_fast_header"
var text = document.createTextNode("Prognose exp")
th.appendChild(text);
th.style.display = "none";
row.appendChild(th);

var th = document.createElement('th');
th.className = "prognose_mail";
th.id = "digit_fast_header"
var text = document.createTextNode("Prognose mail")
th.appendChild(text);
th.style.display = "none";
row.appendChild(th);

var td = document.createElement('td');
td.className = "hoursUsed";
td.innerHTML = "<input type='number' disabled='disabled' id='result'>"
tr.appendChild(td);

var td = document.createElement('td');
td.className = "inputEks";
td.id = "inputEks" 
td.innerHTML = "<input type='number' class='input1' name = 'inpt[]' >";
tr.appendChild(td);
// new line
var inputEks = td.querySelector('input');

var td = document.createElement('td');
td.className = "inputMail";
td.id = "inputMail" 
td.innerHTML = "<input type='number' class='input2' name = 'inpt[]' >";
tr.appendChild(td);
// new line
var inputMail = td.querySelector('input');

// new code

inputMail.addEventListener('input', chnage);
inputEks.addEventListener('input', chnage);

function chnage() {
  var GNS_EKS_TIME = 9;
  var GNS_MAIL_TIME = 9;
  TimeSum = (parseInt(inputEks.value, 10) / GNS_EKS_TIME) + (parseInt(inputMail.value, 10) /   GNS_MAIL_TIME);
  console.log("########### TEST ############## " + TimeSum);
}

<table>
<thead><tr></tr></thead>
<tbody><tr><tr></tbody>
</table>