How to fix two decimal place problem with point .01 returning to 0

Question

The problem is that when I type in a number such as 18.0 my code gets to 18, where I want my user to freely type in 18.06. But my code doesnt let the user go above 18.0. My Fiddle https://jsfiddle.net/dev2804/cf8vwrbj/1/

function Process() {
  var AUS = 1; //CURENY RATE CAN BE CHAGNED BUT THE COUNTRIES IT SELF WON'T, ITS NOT A PART OF THE ASSIGNMENT.
  var YEN = 82;
  var YAUN = 5;
  var RUPIAH = 10000;
  var val = event.target.value;
  var country = {
    "Australia": AUS,
    "JapaneseYen": YEN,
    "ChineseYuan": YAUN,
    "IndonesianRupiah": RUPIAH
  };

  var countRate;
  if (event.target.id == 'countryAustralia') {
    countRate = AUS;
  } else if (event.target.id == 'countryJapaneseYen') {
    countRate = YEN;
  } else if (event.target.id == 'countryChineseYuan') {
    countRate = YAUN;
  } else if (event.target.id == 'countryIndonesianRupiah') {
    countRate = RUPIAH;
  }
  var text = "";
  var i;
  var rateMp = (val / countRate);


  if (val > 0.01 || val < 0) {
    for (var i in country) {
      var currency = (rateMp * country[i]);
      var input = document.querySelector('#country' + i); // select the input by it's ID, I used the country object to build the selector
      input.value = currency; // assign the calculated value to the input
    }
  } else if (val == "") {
    for (var i in country) {
      var currency = "";
      var input = document.querySelector('#country' + i);
      input.value = currency;
    }
  } else if (val.toString() == "0") {
    for (var i in country) {
      var currency = 0.00;
      var input = document.querySelector('#country' + i);
      input.value = currency;
    }
  }

}

<Section class="container">
  <Table>
    <tr class="RowDesign">
      <td class="CountryName">
        <div class="CountryText">Australia</div>
      </td><br>


      <td>
        <INPUT placeholder="AUD" type="number" Class="Country" ID="countryAustralia" list="CommonVal" oninput="Process();" onClick="Remove();" />
      </td>
    </tr>

    <tr class="RowDesign">
      <td class="CountryName">
        <div class="CountryText">Japan</div>
      </td><br>
      <td>
        <INPUT type="number" placeholder="JPY" Class="Country" ID="countryJapaneseYen" list="CommonVal" oninput="Process();" onClick="Remove();" />
      </td>
    </tr>

    <tr class="RowDesign">
      <td class="CountryName">
        <div class="CountryText">China</div>
      </td><br>

      <td>
        <INPUT type="number" placeholder="CNY" Class="Country" ID="countryChineseYuan" list="CommonVal" onInput="Process();" onClick="Remove();" />
      </td>
    </tr>

    <tr class="RowDesign">
      <td class="CountryName">
        <div class="CountryText">Indonesia</div>
      </td><br>
      <td>
        <INPUT type="number" placeholder="IDR" Class="Country" ID="countryIndonesianRupiah" list="CommonVal" oninput="Process();" onClick="Remove();" />
      </td>
    </tr>

    <Datalist ID="CommonVal">
     <option value=1>1</option>
     <option value=10>10</option>
     <option value=100>100</option>
     <option value=500>500</option>  
    </Datalist>
  </Table>
</Section>

I tried couple of if statements but didn't work. So now I have no idea on how to fix this bug.

https://stackoverflow.com/questions/34057595/allow-2-decimal-places-in-input-type-number/34057860 check this, you can add `step="any"` to your input tag and allow decimal places — Sachi.Dila, Jul 17 '19 at 06:18
The substring mess in validate is kind of suspicious. Can you use regular expressions instead? — le3th4x0rbot, Jul 17 '19 at 06:25
@trognanders I have fixed the code but the issue is still the same — Dev Patel, Jul 17 '19 at 06:31
This should be helpfull for smaller increments. https://stackoverflow.com/questions/19011861/is-there-a-float-input-type-in-html5 I would recommend to not use number input. Maybe add a regex to the input field? Using pattern attribute on the input? — Persijn, Jul 17 '19 at 06:57
I think your problem is with using input type number. Verify using console.log on the values before you set them to the inputs. — le3th4x0rbot, Jul 17 '19 at 07:52

score 0 · Accepted Answer · answered Jul 17 '19 at 09:43

You can try this, i updated you code:

<HTML>
 <HEAD>
  <TITLE>Currency Converter Protype4</TITLE>
 
  </HEAD>
 <BODY>
  <Style>
   body {
    background-image: url(https://lh4.googleusercontent.com/-XplyTa1Za-I/VMSgIyAYkHI/AAAAAAAADxM/oL-rD6VP4ts/w1184-h666/Android-Lollipop-wallpapers-Google-Now-Wallpaper-2.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    font-family: 'Roboto', sans-serif;  
   }
   table{
    border-collapse: collapse;
    width: 360px;
    height: 370px;
    border-radius: 5px;
    position: absolute;
    top: 50%;    /*Remember this */
    left: 50%;
    margin-top: -185px;
    margin-left: -180px;
   }
   .RowDesign{
    height: 80px;
    background-color: #ccffff;
    border: 10px solid #b3b3ff;
    border-radius: 5px;
    
   }
   .container{
   position: absolute;
   top: 50%;    /*Remember this */
   left: 50%;
   margin-top: -200px;
   margin-left: -190px;
   width: 380px;
   height:400px;
   background-color: #b3b3ff;
   border: 3px solid #b3b3ff;
   border-radius: 5px;

   }
   .CountryName{
    padding-left: 8px;
    padding-right: 18px;
    padding-top: 5px;
    
    text-align: center;
    
   }
   .ImgText{
     width: 70px;
     height: 45px;
     border: 1px solid #fff;  
     
   }
   .Country{
    height: 30px;
    width: 175px;
    padding-left: 20px;
    border: 2px solid #0066ff;
    border-radius: 15px;
    
   }
   .Country:hover{
    background-color: #e6e6ff;
   }
   .CountryText{
    vertical-align: center;
    visibility: hidden;
    font-weight: Bold;
    color: #3d2263;
   }
   .ImgText:hover ~ .CountryText{
    visibility: visible;
   }
   input:focus {
    background-color: #e6e6ff;
   }
  </Style>
  <Section class="container">
   <Table>
    <tr class="RowDesign">
     <td class="CountryName"><img class="ImgText" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Flag_of_Australia_%28converted%29.svg/1600px-Flag_of_Australia_%28converted%29.svg.png" alt="Australia"><div class="CountryText">Australia</div></td><br>
     
     
     <td><INPUT placeholder="AUD" type="number" Class="Country" ID="countryAustralia" list="CommonVal" oninput="validate(this);Process(event);" onClick="Remove();" ></td> 
    </tr>
    
    <tr class="RowDesign">
     <td class="CountryName"><img class="ImgText" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/Flag_of_Japan.svg/1280px-Flag_of_Japan.svg.png" alt="Japan"><div class="CountryText">Japan</div></td><br>
     <td><INPUT type="number" placeholder="JPY" Class="Country" ID="countryJapaneseYen" list="CommonVal" oninput="validate(this);Process(event);"  onClick="Remove();"></td>
    </tr>
    
    <tr class="RowDesign">
     <td class="CountryName"><img class="ImgText" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/510px-Flag_of_the_People%27s_Republic_of_China.svg.png" alt="ChineseYuan" height="60px" width="90px"><div class="CountryText">China</div></td><br>

     <td><INPUT type="number" placeholder="CNY" Class="Country" ID="countryChineseYuan" list="CommonVal" onInput="validate(this);Process(event);" onClick="Remove();"></td>
    </tr>
    
    <tr class="RowDesign">
     <td class="CountryName"><img class="ImgText" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Flag_of_Indonesia.svg/510px-Flag_of_Indonesia.svg.png" alt="IndonesianRupiah" ><div class="CountryText">Indonesia</div></td><br>
     <td><INPUT type="number" placeholder="IDR" Class="Country" ID="countryIndonesianRupiah" list="CommonVal" step="any"  oninput="validate(this);Process(event);" onClick="Remove();" ></td>
    </tr>
    
    <Datalist ID="CommonVal">
     <option value=1>1</option>
     <option value=10>10</option>
     <option value=100>100</option>
     <option value=500>500</option>  
    </Datalist>
   </table>
  </Section>
  <SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
  
  var validate = function(e) {
   var t = e.value;
      //console.log(t)
  /*  e.value = (t.indexOf(".") >= 0) ? (t.substr(0, t.indexOf(".")) + t.substr(t.indexOf("."), 3)) : t; */
     // console.log(e.value )
  }
  function Process(event) {
      var AUS = 1;  //CURENY RATE CAN BE CHAGNED BUT THE COUNTRIES IT SELF WON'T, ITS NOT A PART OF THE ASSIGNMENT.
   var YEN = 82;
   var YAUN = 5;
   var RUPIAH = 10000;
   var val = event.target.value;
   var country = {
    "Australia": AUS,
    "JapaneseYen": YEN,
    "ChineseYuan": YAUN,
    "IndonesianRupiah": RUPIAH
   };
   
   var countRate;
   if  (event.target.id=='countryAustralia'){
    countRate = AUS;
   }
   else if  (event.target.id=='countryJapaneseYen'){
    countRate = YEN;
   }
   else if  (event.target.id=='countryChineseYuan'){
    countRate = YAUN; 
   }
   else if  (event.target.id=='countryIndonesianRupiah'){
    countRate = RUPIAH;
   }  
   var text = "";
   var i;
   var rateMp = (val/countRate);
   
   if (val>0){
    for (var i in country) {
     var currency = (rateMp* country[i]);
     var input = document.querySelector('#country' + i);     // select the input by it's ID, I used the country object to build the selector
         if  (event.target.id!='country' + i){
    
     input.value = currency;            // assign the calculated value to the input
    }
        }
   }
   else if (val==""){
    for (var i in country) {
     var currency = "";
     var input = document.querySelector('#country' + i);
     input.value = currency; 
    }
   }
   else if (val.toString()=="0"){
      for (var i in country) {
     var currency = 0.00;
     var input = document.querySelector('#country' + i);
     input.value = currency; 
    }
   }
    
  }
function Remove(){}
  </SCRIPT>
 </BODY>
</HTML>

This is working same as you want.Thanks!!

What does the statement if (event.target.id!='country' + I){} that does — Dev Patel, Jul 18 '19 at 05:35
In your case what was happening, when you are inputting some value in particular field then it change the values of other fields and same field also but in actual this should not happen. Because when you are putting then it should reflect other field not same,that's why i put condition. I hope this will make sense for you and hope i will able to understand to you that senerio — Bhawana, Jul 18 '19 at 06:14
I mean if you try putting in a negative sign, it will not work. — Dev Patel, Jul 26 '19 at 06:22

How to fix two decimal place problem with point .01 returning to 0

1 Answers1