JavaScript + JQUERY: Calculating based on two input variables

Question

Introduction

I need to calculate given two numbers in two td elements in my table.

My table looks like this:

I need to do the following calculation and put result in hours used automatically.

The relevant calculation is found below, and is hardcoded into the hours used column for now, since I don't know how to do it through the user input in Prognose exp and 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)

Why the jquery and css tags? There's no jQuery in the script, nor has this problem anything to do with CSS. — Andreas
– Andreas, Commented Nov 13, 2019 at 12:34

jcubic · Accepted Answer · 2019-11-13 12:53:51Z

You need those things 1. first save the input fields in variables 2. then use change or input event to fire your code when data in input change 3. use input.value to the the text from input and parse it

you don't need to call parseInt on number that you get from calculation.

// 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>

@JSSGOD1337 sorry I'm not able to use codementor, I've registered got approved but they don't have proper tax form option to select with my case.

Shilly · Accepted Answer · 2019-11-13 12:48:46Z

1) You need to select the input elements and get their actual values. Just typing ('#inputEks') will not get the element's value.

Did you intend to type $('#inputEks'), the JQuery selector?

2) You also need to parse those values into actual integers, since the input element will give you a string, while the multiplication wants you to use a number.

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>

Collectives™ on Stack Overflow

JavaScript + JQUERY: Calculating based on two input variables

Introduction

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Introduction

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related