Calculating values-CodePudding

Am having a problem in my jquery script to do multiplication

in my script this is the area of problem i have

<script>
$(document).ready(function(){
  $(".parameter").on("input",function() {
        var num = $('input[name="num"]').val();
        var left = $('input[name="left"]').val();
        var total = num * left %; // 2 x 50000 % = 1000
        var finalr = left - total; // 50000 - 1000 = 49000
      $(".result").text(finalr  " final result"); // prints 49000
    });
})
</script>

I want to make calculation and results go to disabled input box automatically as i descried it in html comments

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#div1, #div2 {
  position: relative;
  display: block;
  width: fit-content;
  width: -moz-fit-content;
  --val: '';
}

#div1::after {
  content: var(--val) ' INX';
  position: absolute;
  left: 3px;
  top: 1px;
  bottom: 1px;
  pointer-events: none;
  line-height: 20px;
}

#left, #right {
  font-family: inherit;
  font-size: inherit;
}

#left {
  color: transparent;
}
</style>
<body>

<p>  
<input type="text"  name="num"  placeholder="amo"/> <! --- value set to 2 ---> 
</p>

 <div id="div1">
 <input type="text" id="left" name="left"  maxlength="18" /></div> <! --- value set to 50000 --->

<div id="div2">
<input type="text" id="right" name="right"  placeholder="INX" disabled /></div> <! --- 49000 results goes here --->

<script>
document.querySelector('#left').addEventListener('input', function() {
  this.parentElement.style.setProperty('--val', "'" this.value "'");
  document.querySelector('#right').value = this.value ? this.value   ' INX' : '';
});
</script>
<script>
$(document).ready(function(){
  $(".parameter").on("input",function() {
        var num = $('input[name="num"]').val();
        var left = $('input[name="left"]').val();
        var total = num * left %; // 2 x 50000 % = 1000
        var finalr = left - total; // 50000 - 1000 = 49000
      $(".result").text(finalr  " final result"); // prints 49000
    });
})
</script>
</body>
</html>

CodePudding user response：

the issue is you're trying to use % as a percentage. % is the Remainder operator.

what you can do is to replace

var total = num * left %;

with

var total = num * left/100;

CodePudding user response：

try using

$(".result").val(finalr  " final result");

I haven't checked but I hope it works.