I'm currently attempting to determine the total cost of a series of operations, however, I am not receiving any results

Here is the code snippet from my HTML file:

    <tr>
      <td><input id="z1" type="number"  
      oninput="calculateSubTotal()">
      </td>
      <td>Shirts - WASH - Qty 1 to 4</td>
      <td>2.50 ea</td>
      <td></td>
    </tr>

This is how my Javascript function looks like:

function calculateSubTotal() { 
 var subTotal = (getTableOnePrice() + getTableTwoPrice() + getTableThreePrice() + getTableFourPrice());
 document.getElementById("subtotal").innerHTML = subTotal.toFixed(2);
 return subTotal;
}

An example of one of the functions in my script is this:

function getTableTwoPrice(){    

var ba = document.getElementById("y1").value * 6.00;

var bb = document.getElementById("y2").value * 1.25;

var bc = document.getElementById("y3").value * 4.00;

var bd = document.getElementById("y4").value * 6.00;

var be = document.getElementById("y5").value * 7.00;

var bf = document.getElementById("y6").value * 8.00;

var bg = document.getElementById("y7").value * 9.00;

var bh = document.getElementById("y8").value * 5.00;

var bi = document.getElementById("y9").value * 13.00;

var bj = document.getElementById("y10").value * 10.00;

var bk = document.getElementById("y11").value * 12.00;

var bl = document.getElementById("y12").value * 14.00;

var bm = document.getElementById("y13").value * 16.00;

var bn = document.getElementById("y14").value * 10.00;

var tableTwoTotal = ba + bb + bc + bd + be + bf + bg + bh + bi + bj + bk + bl + bm + bn;

   return tableTwoTotal;
 }

Answer №1

Perhaps consider using the onchage event instead of oninput, as I have noticed that oninput may not function correctly in certain situations.

Answer №2

My approach would be to start by focusing on displaying information on the screen first. Using onchange for real-time updates is ideal as oninput triggers with every keystroke.

<tr>
      <td><input id="z1" type="number" onchange="calculateSubTotal()">
      </td>
      <td>Shirts - WASH - Qty 1 to 4</td>
      <td>2.50 ea</td>
      <td></td>
    </tr>
    <div id='subtotal'></div>

 <script>   
    function calculateSubTotal() { 
    var subTotal = getTableOnePrice();
    document.getElementById("subtotal").innerHTML = subTotal.toFixed(2);
    return subTotal;
    }
    function getTableOnePrice(){
        return 5
    }
</script>

Once you have the basic functionality working, you can then gradually incorporate the actual getTableOnePrice() and other necessary components.

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

Initiate a new line within a flex item

<Popper id={"simplePopper"} open={this.context.loading} style={{display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: 'red',opacity:'0.5',width:'100%',he ...

The Rails text area fails to load through JavaScript when a line break is detected

My comment form has a feature that displays the content of the text area using js. It functions properly unless a new line is entered in the text area, in which case it does not show up right away. However, after refreshing the page, the comment appears wi ...

Resolving Node.js Absolute Module Paths with TypeScript

Currently, I am facing an issue where the modules need to be resolved based on the baseUrl so that the output code is compatible with node.js. Here is my file path: src/server/index.ts import express = require('express'); import {port, database ...

What is the most effective method for generating dial images through programming?

Currently, I am in the process of creating a website that makes use of variously sized and styled dials to indicate progress. The filled portion of the dial represents how close an item is to being 100% complete. I am seeking a universal solution that wil ...

tips for replacing multiple route parameters in Angular using the replace function

I am facing an issue when trying to replace multiple parameters using the angular replace function. The problem is that the function only detects the first parameter. For example, if I have this route admin/management/{type}/card/{id}, and use the route.r ...

If an error occurs later in the function, `console.log` will not function properly

While debugging some code in Express.js using console.log statements, I encountered an issue where the console.log statements do not execute if there's an error in the function, even if that error occurs after the console.log statement. This behavior ...

Issues Persist with Bootstrap Tree View - object passed but no output显示

After going through numerous discussions and solving several issues along the way, I have encountered a major problem where there is no output. As mentioned before, I am utilizing Bootstrap Tree View: To establish the hierarchical structure required for ...

Navigate to the top of the page prior to updating the Link route in NextJS

Whenever I click on a link to navigate to a new page, the page loads and immediately scrolls to the top. I want to change this behavior so that the scroll resets to the top before the new page is rendered. You can observe this issue on . If you scroll do ...

Re-rendering multiple components with the new `use` feature in React version 18.3.0

When trying to fetch and use data using React 18.3.0, I encountered an issue with multiple re-rendering. react: 18.3.0-canary-3ff846d10-20230724 next: 13.4.12 The code for SuspenseTest component is causing multiple console outputs (about 5 to 8 times) be ...

A guide to setting defaultValue dynamically in React Hook Form

Presently, I am facing an issue with editing the Product page. The props values are fetched through an API and sent from the parent component. However, I am struggling to set this value to my Datepicker input. This is because the defaultValue function from ...

Guide on how to conditionally render Container Classes

Initially, the designer provided me with this: Essentially, a category is passed from the previous screen. Through some UI interactions, I have to render this screen repeatedly. The flow goes like this: you choose a category, if it has subCategories, allo ...

Flipping a combination of CSS 3 and JavaScript cards will cause them to flip all together in unison

Hello! I came across a really cool card flip code that is IE compatible. I made some modifications to it and got it working, but there's one problem - instead of flipping the selected card, it flips all the cards. I tried modifying the JavaScript code ...

Increasing the width of a line to fill the entire space using CSS properties

Seeking alternative ideas to replace my current solution using only CSS for one of the problems. I already have a working JS solution, but I'm interested in exploring a CSS-only approach. https://i.sstatic.net/PQ7er.png A) All elements here have the ...

Using (javascript:) within Href attributes

Recently, I've noticed some people including "javascript:" in the href attribute of an a tag. My question is: what is the purpose of this? Does it guarantee that clicking on the a tag directs the function of the click to JavaScript for handling, rathe ...

Is there a way to instruct npm to compile a module during installation using the dependencies of the parent project?

I am curious about how npm modules are built during installation. Let me give you an example: When I check the material-ui npm module sources on GitHub, I see the source files but no built files. However, when I look at my project's node_modules/mate ...

Try employing an alternative angular controller when working with the bootstrap modal

I am trying to implement a bootstrap modal in my main HTML file, and I need some help on how to call another Angular controller for the modal. The button that triggers the modal is within a div that already has an Angular controller, and this is causing th ...

NextJS will redirect the user back to the previous router they came from following authentication

Hello! I am currently facing a challenge in redirecting a user back to the initial page they clicked on after being authenticated. The issue lies in server-side rendering (SSR) and the lack of access to the window.history object in getServerSideProps. The ...

Loading CSS dynamically at runtime can be seen as a mix of both success and failure

I have been attempting to optimize my app by loading fonts on demand. By retrieving fonts from a project directory generated by the app, it is able to gather all necessary data. My primary concern is whether there is an equivalent of 'app-storage://& ...

Can a client component in NextJs retrieve data from a server component?

Apologies for the way the question is phrased. I have a server component named auth.ts that retrieves user details after they log in. This server side component is located at //auth.ts export const validateRequest = cache( async (): Promise< { use ...

Expand Menu Options (jQuery)

Currently facing a jQuery problem that I can't seem to figure out. I've set up a menu with submenu elements and want to toggle the content height by clicking on menu items. The issue arises when clicking on another item causes the content to coll ...