JavaScript calculate % of number in field

Question

I have 2 input fields:

<input id="input1" etc />
<input id="answer" etc />

What I want to do is when a user types in a numerical value (and to restrict them to numbers, no letters or special characters) in "input1" then "answer" input field shows what 0.0015% is of that number (i.e. user types in 35000 so in the answer field it would show 52.5 as that's 0.0015% of the number they entered). This is to be done real time with no submit or calculate button.

How can I do this?

This feels very much a "do my homework for me" question. We need way more details. What have you tried to accomplish this? Are you using any framworks or do you need to accomplish this with vanilla javascript? — schu34, Apr 26 '20 at 16:41
I've been trying to amend this with no success, this is one I found from another post but doesn't do what I need it do and JS isn't my thing. http://jsfiddle.net/vikashvverma/1khs8sj7/1/ — gdjc, Apr 26 '20 at 16:42
@gdjc if you need 2 inputs then you can easily edit my code and do your job accordingly. — A l w a y s S u n n y, Apr 26 '20 at 16:59

A l w a y s S u n n y · Accepted Answer · 2020-04-26T18:17:16.497

1

You can do this way to add keyup event on your first input element. I've used vanilla JS though you've used jquery on your fiddle. My fiddle,

function myFunction() {
  var inputVal = document.getElementById("input").value;
  var answerVal = document.getElementById("answer");
  var percentage = (0.0015/100) * parseInt(inputVal,10) * 100;
  if(inputVal !== ''){
     answerVal.value = (Math.round( percentage * 100 ) / 100).toFixed(1)
  }else{
  answerVal.value = '';
  }
}

input:<input id="input" type="number" onkeyup="myFunction()"/>
answer:<input id="answer" type="text" value=""/>

edited Apr 26 '20 at 18:17

answered Apr 26 '20 at 16:56

A l w a y s S u n n y

36,497
8
60
103

Brilliant, thank you. Tried it in JSFiddle and works perfectly. – gdjc Apr 26 '20 at 16:59
@gdjc glad it helps your somehow, if you need 2 inputs then you can easily edit my code and do your job accordingly. Happy Coding! best of luck – A l w a y s S u n n y Apr 26 '20 at 17:00
Thanks again, just one thing and I'm probably being a pain - but how do I restrict the output to be one decimal point i.e. user enters "27999" and its returned as "41.9985" - ideally I'd just want that to look like "41.9". Sorry but I'm a UXD not a coder :) – gdjc Apr 26 '20 at 17:13
No problem, you can use toFixed(1) ; see more https://www.w3schools.com/jsref/jsref_tofixed.asp – A l w a y s S u n n y Apr 26 '20 at 17:45
and this one also as reference https://stackoverflow.com/a/13292833/1138192 – A l w a y s S u n n y Apr 26 '20 at 17:48
Yeah that's what I found, but wherever I put that line of code in it doesn't work. Super sorry, could you update your answer with what it's supposed to be. I'll then be quiet :) – gdjc Apr 26 '20 at 17:51

score 0 · Answer 2 · answered Apr 26 '20 at 16:57

Your code is almost working perfectly, but it was not working in the given example by you and the reason for that is you have used parseint function of javascript which does not allow decimal values, and to restrict numbers you can use input type number.

  $(function(){
    
    $('#pointspossible').on('input', function() {
      calculate();
    });
    $('#pointsgiven').on('input', function() {
     calculate();
    });
    function calculate(){
        var pPos = $('#pointspossible').val(); 
        var pEarned = $('#pointsgiven').val();
        var perc="";
        if(isNaN(pPos) || isNaN(pEarned)){
            perc=" ";
           }else{
           perc = ((pEarned*pPos) / 100);
           }
        
        $('#pointsperc').val(perc);
    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='number' id="pointspossible"/>
<input type='number' id="pointsgiven" />
<input type='text' id="pointsperc" disabled/>

JavaScript calculate % of number in field

2 Answers2