Jump to content

How to display percentage display?

newcoder1010

By newcoder1010
in JavaScript

 Share

Recommended Posts

dsonesuk w3schools Guru

dsonesuk

Posted
Posted

  

<!doctype html>
 <html lang="en">
 <head>
<meta charset="utf-8">
 <title>Document Title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="">
<style>
*{box-sizing: border-box;}
	</style>
</head>
<body>
<form>
<input type="number" id="entervalue" value="0"> &plus;
<input type="text" id="percentage" value="10">%
<input type="text" id="calculate" value="0" disable>
</form>
<script>
var x =document.getElementById("entervalue");
var y=document.getElementById("percentage");
window.onload=function(){
	x.onkeyup=function(){
updatecalc();
}
y.onkeyup=function(){
updatecalc();
}
	}
function updatecalc()
{
var z=document.getElementById("calculate");
	z.value=((x.value / 100 * parseInt(y.value))+ parseInt(x.value));
if(x.value=="" || y.value==""){
z.value=z.defaultValue;
}
}
	</script>
</body>
</html>

Link to comment
Share on other sites
newcoder1010 Invested Member

newcoder1010

Posted
  • Author
Posted

Hello,

Thank you again for the code. I learned a lot from it. However, I got another code that is closer to my requirements as my requirements have changed quite a bit. 

Please kindly look at the requirements. 

1. Cash reward should be 5% of the cash value. 
2. Min cash reward should be 250. and Max cash reward would be 6000.
3. It requires fast increment. Max number should be displayed in less than 5 seconds. As soon as people start typing, it should increment to min amount of $250.
4. Calculation should always start from the previously calculated cash reward amount. It should increment and decrement.  You can decide what number it should increment or decrement by. If cash reward is less than the calculated reward, it should  decrement. If cash reward is more than the calculated reward, then it should increment from the cash reward amount. In other words, it should not always calculate from 0.

5. Cash reward amount should display in this $11,111 format. 

I spent good two days already. I kind of did requirements 1, 2, and 3. I just modified the existing code by adding variables and if-else statements. Even if code are not good enough, at least 1,2, and 3 work for me. I am not sure how to do requirement no 4. If you could help me with the code, it will be very good. 

  

<p><input id="source" placeholder="Sale Price" type="text" /></p>

<p>= $<span id="result">0</span></p>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
  const persent = 5;
  const delay = 0;
  const max = 6000;
  const min = 250;
  let tempRes2 = 2;
let tempRes = 0;


  const source = document.querySelector('#source');
  const result = document.querySelector('#result');
  window.timerId;

  function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
  }

  const typeHandler = function(e) {
    if (typeof window.timerId !== 'undefined') {
      clearInterval(window.timerId);
    }

    let value = e.target.value;

    if (!isNumber(value)) {
      result.innerHTML = 0;
      return;
    }

    const persentage = Math.round(value*persent/100);
    dividePer = Math.round(persentage /2);
    let i = 0;

    window.timerId = setTimeout(function drawDigit() {
      if (i < persentage) {
         tempRes = ++i;
         if (persentage < min) {
            result.innerHTML = min;
         }else if (persentage > max ){
            window.timerId = setTimeout(drawDigit, delay);
            result.innerHTML = max ;
        } else {
            window.timerId = setTimeout(drawDigit, delay);
            tempRes2 = i*7+110;
            if (tempRes2 < persentage) {
                result.innerHTML = tempRes2;
            } else {
                result.innerHTML = persentage;
            }

       }

      }
    }, delay);
  }

  source.addEventListener('input', typeHandler);
});
</script>

Thanks!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...