java script code not working in chrome mobile browser but in desktop its working fine

Question

in my WordPress site i created java bootstrap loan calculator its working perfectly on desktop but when i use mobile chrome its not working. i tried with wp-coder plugin and try with manually adding this. in chrome dev tools mobile view its working fine with the real devise this issue occured.is there any way to resolve this issue i much appreciate you help to resolve this issue

  <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
    />



        <div class="columns is-12-tablet is-6-desktop is-3-widescreen" style="height: 500px; width:100% " >
          <div class="column w-50 p-3 "  >
            <div class="card w-50 p-3">
              <div class="card-content w-50 p-3">
                <form id="loan-form">
                  <div class="level w-50 p-3">
               
                    <div class="level-left is-marginless w-50 p-3s">
                      <div class="level-item">
                        <p class="number">1</p>
                         <p> Loan Amount  &nbsp;&nbsp;&nbsp;</p>
                        <p id="yearssliderfuc">  </p>
                      </div>
                    </div>
                  </div>
          <input  id="amount"   type="range" min="20000" max="200000" step="10000"   onchange="yrthslide();computeResults()" />
                  <div class="level">
                    <div class="level-left is-marginless">
                    </div>
                    <div class="level-right">
                      <div class="level-item">
                        <div class="field">
                          <div class="control has-icons-right">
                            
                            <span class="icon is-small is-right">
                          
                              
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="level">
                    <!-- Left side -->
                    <div class="level-left is-marginless">
                      <div class="level-item">
                        <p class="number">2</p>
                       <p> Number Of Days  &nbsp;&nbsp;&nbsp;</p>
                        <p id="monthssliderfuc">  </p>
                      </div>
                    </div>

                  </div>
           <input  id="years" min="30" max="120" step="30" type="range" onchange="monthslide();computeResults()" />
                  <div class="control">
          <br>
               
                  </div>
                </form>

              </div>
            </div>
      <div >
        <div class="notification is-link has-text">
          <p id="totalPayment" class="title ">LKR</p>
          <p class="subtitle is-4">Total Amount</p>
        </div>
      </div>
        <div >
          </div>    
        </div>


  


  <script >
function computeResults(e) {
  // UI

  const UIamount = document.getElementById("amount").value;
/*   var UIinterest = 50
  if(UIamount> 50){
    var UIinterest = 50
  }*/


  if(UIamount<50000){
    var UIinterest = 16/100;
  }else if(UIamount>50000 && amount<90000){
    UIinterest = 18/100;
  }else if(UIamount>100000 && amount<140000){
    UIinterest = 20/100;
  }else{
    UIinterest = 22/100
  }



  const UIyears = document.getElementById("years").value;





  var interestperday = (UIamount * UIinterest)/365;
  console.log(interestperday);
  console.log("interest per day");
  const monthly = parseFloat(interestperday);
  const monthlyPayment = monthly.toFixed(2);


  var interest = interestperday*UIyears;
  const interestfinalee = parseFloat(interest);
  console.log(interestfinalee);
  console.log("interest  all time");



  var ProFees =  (UIamount*10)/100;
  const ProFeesfin = parseFloat(ProFees);
  console.log(ProFeesfin);
  console.log("ProFees");

  var DocHFees = (UIamount*5)/100;
const DocHFeesfin = parseFloat(DocHFees);
  console.log(DocHFeesfin);
  console.log("DocHFees");

  var TransFee =  (UIamount*5)/100;
  const TransFeefin = parseFloat(TransFee);
  console.log(TransFeefin);
  console.log("TransFee");
  
  const UIamountfin = parseFloat(UIamount);


  // Calculating total payment
const all = TransFeefin + DocHFeesfin + ProFeesfin  + interestfinalee + UIamountfin
  console.log(all);
  console.log("allallallallallallallallallallallallallall");
///*****************************************************


  const totalPayment = all.toFixed(2);



  document.getElementById("totalPayment").innerHTML = "LKR " + totalPayment;

  e.preventDefault();
}


       
      function monthslide(){
            var Monthslider = document.getElementById("years").value
          document.getElementById("monthssliderfuc").innerHTML = Monthslider;
      }


             
      function yrthslide(){
            var Monthslider = document.getElementById("amount").value
          document.getElementById("yearssliderfuc").innerHTML = Monthslider;
      }
 
 
  </script>

Answer 1

You are using the "computeResults()" function, but "computeResults()" function is not defined and the "Calculate()" function is not being used.

Update: Add other details, after the code has been updated:

e.preventDefault() function is not defined and that generates the issue, I removed that and it already works in mobile.

Answer 2

problem resolved. its because of same function name for mobile view and desktop view after changing the function names its resolved