Decline the input according to the percentage

After experimenting with the script, I discovered that it did not perform as expected (even though it works on Google Webapp's script HTML form). My goal is to invalidate an input if the Downpayment is less than 30% or more than 100% of the Price, in which case the response should be Invalid Input. Can anyone provide guidance on what needs to be modified within this script?

//------------------------Process---------------------------------------//
document.getElementById("btn").addEventListener("click", doStuff);

function doStuff() {
  const rate = 0.155;
  
  const vprice = document.getElementById("price").value;
  const downPayment = document.getElementById("DownPay").value;
  const period = document.getElementById("app").value;
  
  var nf = new Intl.NumberFormat(); //number format 
  const res =  nf.format(Math.round((vprice - downPayment) * rate / period));
  
  
  document.getElementById("res").innerHTML = "Your Estimated Monthly Rental: "+ res;
  google.script.run.userClicked({
    vprice,
    downPayment,
    rate,
    period,
    res
  });
}

Answer №1

Here is the solution:

  <script>
  

  //dropdown for HTML----------------
    document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
  });
  //---------------------------------
  
  
  
  //------------------------Execution Process---------------------------------------//
    document.getElementById("btn").addEventListener("click", executeFunction);

    function executeFunction() {
      const interestRate = 0.155;
      
      const vehiclePrice = document.getElementById("price").value;
      const initialPayment = document.getElementById("DownPay").value;
      const loanPeriod = document.getElementById("app").value;
      var nf = new Intl.NumberFormat(); //number format 
      const result =  nf.format(Math.round ((vehiclePrice - initialPayment) * interestRate / loanPeriod));

      
      if(parseInt(initialPayment) < 0.3*parseInt(vehiclePrice) || parseInt(initialPayment) > parseInt(vehiclePrice)) {
      
      document.getElementById("res").innerHTML = "Invalid Input";
      
      }
      
      else {
      
      document.getElementById("res").innerHTML = "Your Estimated Monthly Rental: "+ result;
      google.script.run.userClicked({
        vehiclePrice,
        initialPayment,
        interestRate,
        loanPeriod,
        result
      });
      
      }
     
    }
  </script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display HTML containing a <script> tag within a REACT component

Looking to embed the following HTML code within a React component: <form action="/process-payment" method="POST"> <script src="https://www.example.com/payment-script.js" data-preference-id="$$id$$"> </script> </form> I ...

A Foolproof Method to Dynamically Toggle HTML Checkbox in ASP.NET Using JavaScript

Although there have been numerous inquiries related to this subject, I haven't been able to find a solution specific to my situation. I currently have a gridview that contains checkboxes. What I'm trying to achieve is that when I select the chec ...

Form a bond with the latest SignalR library to initiate communication

After attempting to connect to an asp.net core signalR server using the code below, I encountered some issues. Can you spot where I might have gone wrong? Here is the error message that I received: Error: The "promise" option must be a Promise v ...

What is the best way to dynamically disable choices in mat-select depending on the option chosen?

I was recently working on a project that involved using mat-select elements. In this project, I encountered a specific requirement where I needed to achieve the following two tasks: When the 'all' option is selected in either of the mat-select e ...

Having trouble inputting text into the text area using Selenium WebDriver with C#

Here is the original code snippet: I am having trouble entering text in the text box below. Can you please help me figure out how to enter text in this text box? <td id="ctl00_cRight_ucSMS_redSMSBodyCenter" class="reContentCell" ...

Tips for distinguishing individual rows within a table that includes rowspans?

My Vue application calculates a table with rowspans by using an algorithm based on a configuration file. This allows the application to render columns (and maintain their order) dynamically, depending on the calculated result. For example, see the code sn ...

Optimal method for a React and HTML Select-component to output String values instead of Integer values

Within my React-class (JSX), I've included the following code: var Select = React.createClass({ onChange: function (ev) { console.log(ev.target.value); }, render: function() { var optionsHtml = this.state.options.map(function (el) { ...

Integrating data binding within a .append function using AngularJS

I followed this code example (http://jsfiddle.net/ftfish/KyEr3/) to develop a form. However, I encountered an issue with an input having ng-model set to "value" and needing to display that value within {{ }} in a TD: angular.element(document.getElementByI ...

Encountering a module injection error in AngularJS related to the ui.grid feature during my first experience with it

Trying to develop an AngularJS app, encountering the following error upon running the code: Uncaught Error: [$injector:modulerr] Failed to create module myApp: Error: [$injector:modulerr] Failed to create module ui.grid: Error: [$injector:nomod] Module &a ...

Ways to modify the color of the legend text in a HighChart graph

Click here I am attempting to modify the color of the series legend text from black to any color other than black: $(function () { $('#container').highcharts({ legend: { color: '#FF0000', backgroundColor: '#F ...

adjust variable increment in JavaScript

As I work on developing a Wordpress theme, I have encountered an issue with incrementing a load more button using Javascript. This is my first time facing this problem with a javascript variable, as I don't always use Wordpress. The variable pull_page ...

Facing Hurdles in Starting my Debut Titanium Mobile Project

I recently started using Titanium Studio (version 2.1.0GA on WindowsXP) and I have added the Android SDK to it. However, I am encountering an error when trying to run my first mobile project. The console is displaying the following message: Can anyone off ...

How to efficiently target and manipulate links using jQuery Mobile

I previously asked a question about loading an external page without ajax while maintaining it as an iOS web app window. In that example, I used the following code: <script> $(document).bind('pageinit', function() { $("#test").click(func ...

Innovative method for inserting HTML content into the user's clipboard across multiple browsers

If Stackoverflow decided to implement a simple "Copy link to this question" feature. Upon clicking this link on What is your best programmer joke?, it would automatically copy the following HTML code to your clipboard: <a href="https://stackoverflow.co ...

Is there a way to verify the authenticity of a survey depending on the types of form elements used

Creating a form in PHP with various dynamic form elements like radio buttons, text fields, and dropdowns. Seeking to validate this form using JQuery based on the question type, which is identified by the names q1, q2, etc. $(function(){ if ($(&apo ...

Rails application experiencing difficulties in displaying the Raty JS plugin

Encountering issues with the raty js plugin while working on Rails version 5.0. jquery.raty.self-628421be04f36f7a8fa8b9b884c6d7824d6f8bdeba4f172b131f15aa63f713e8.js?body=1:761 Uncaught ReferenceError: jQuery is not defined at jquery.raty.self-628421be ...

jqGrid is failing to display basic JSON data properly

As a newcomer to Jquery and Json, I am struggling with binding a JSON object from a RESTful Webservice written in WCF to jqGrid. Despite saving the JSON object as a static file and attempting to bind it to the grid, I realized that the issue does not lie w ...

Update the CAPTCHA, while also refreshing the entire registration form

JavaScript Snippet <script language="javascript" type="text/javascript"> function updateCaptcha() { $("#captchaimage").attr('src','new_captcha_image.php'); } </script> New Image Code <img src="new_ ...

What is the best way to adjust a map to completely fill the screen?

I am experiencing an issue with my Openlayer map not fitting to full screen automatically. Despite trying various settings, I am unable to resolve this issue. Can anyone suggest what might be causing this problem? Thank you in advance https://i.stack.imgu ...

What steps can I take to improve my routing structure in nodejs and express?

My current WebAPI code is pretty modular, but I want to make it even more so. Right now, all the routes are in my server.js file and I would like to separate them into individual controllers. Any suggestions on how to achieve that? Here's an example: ...