Jump to content
newcoder1010

How to display percentage display?

Recommended Posts

Hello,

I am very new to javascript and jquery. I like to have a text field where I can enter a dollar value and then system should generate 10% and display the number as it is calculating on my website. I am not sure how to do that and what language to use. Sample is on this page Cash reward section.

Thank you!

Share this post


Link to post
Share on other sites

 

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...