Tax calculator that combines item prices and applies tax multiplication

Struggling to crack the code for my calculator. Despite consulting my textbook, I can't seem to figure out why it won't calculate properly. Any advice or tips would be greatly appreciated.

<html>
<head>
<title> Total Calculator </title>
</head>
<body>
<p>
Apples:   <input type="text" id="applesBox" value=""> at $0.60 per piece<br>
Oranges:   <input type="text" id="orangesBox" value=""> at $0.75 each<br>
Pears:   <input type="text" id="pearsBox" value=""> at $1.00 each<br>
Grapes:   <input type="text" id="grapesBox" value=""> at $2.50 per pound<br>
TAX is 8%
</p>
<input type="button" value="Calculate"
<button id='Calculate' onclick= "Calculate()" value="Calculate">Calculate</button>
<script type="text/javascript">

function Calculate() {
    var total = 0;
    var cost = document.getElementById("cost").value;
    var tax = document.getElementById("tax").value;

    total = cost*tax;
    document.getElementById("total").value = total;

document.getElementById('outputDiv').innerHTML= 'Your TOTAL is: ' + total;">
}
</script>
<hr>
<div id="outputDiv"></div>
</body>
</html>

Answer №1

It seems like there are multiple issues in the code.


The HTML code is not properly structured, with the button tag ending prematurely within the onclick attribute.

Additionally, there is a missing end tag for the <script> element.


Remember, in JavaScript, a function declaration should follow this syntax:

function identifier() { }

The identifier should be the name of the function and cannot contain spaces or quotation marks.


Your code does not include any calls to the declared function.


Although you attempt to retrieve elements using document.getElementById, only one of the specified ids actually exists in the HTML document.


Make sure to close your function with } after all instances of document.getElementById have been called inside it.

Answer №2

If you had diligently followed the instructions in your textbook, it is unlikely that you would encounter these problems.

  1. Ensure function names do not have spaces
  2. Double-check the syntax of your input button

2.1 Verify onclick event

2.2 Properly close the tag

3 Remember to close the script tag

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

Is there a way to execute a javascript function that is located outside of my Angular application without having to import it?

I need to be able to trigger a JavaScript function that is located outside of my Angular app when a button is clicked. Unfortunately, it seems that importing the JavaScript directly into my Angular app isn't feasible for this task. The platform I am ...

Quick and easy way to access json data with jquery

https://i.sstatic.net/kiEwe.png Need help with reading data from JSON format using jQuery. I've attempted the code below, but I'm having trouble retrieving the exact data I need. $.ajax({ url: '@Url.HttpRouteUrl("GetDistrictLi ...

The API is providing data, but it's being returned within an ambiguous object. What could be causing this confusion?

Utilizing https and async for simultaneous calls to retrieve two objects, then storing them in an array. The call is structured as follows: if (req.user.isPremium == false) { // Free user - Single report let website = req.body.website0; let builtWit ...

Utilizing the power of JQuery's each() function alongside UI.sortable() for enhanced

Need help with updating data-priority attribute after sorting an unordered list using jQuery ui. Currently, the attribute is only set on load and not updated after each sort. I have created a fiddle to demonstrate the issue. It seems like a simple fix but ...

How to automatically center Google Maps and update marker on responsive resize

Trying to figure out how to maintain the center of Google Maps while resizing responsively has been a challenge. I've successfully centered the map, but I'm struggling to include my marker in the JavaScript code so that it stays centered as well ...

Image gradually disappears after being loaded via ajax request

I am trying to achieve a fade-in effect for images after they have been loaded following an ajax call. The goal is to make the fade-in occur smoothly, rather than having the user observe the image loading process. Is there anyone who can assist me with ...

Why is it that vanilla HTML/JS (including React) opts for camelCase in its styling conventions, while CSS does not follow the same pattern

Each type of technology for styling has its own set of conventions when it comes to naming properties, with camelCase and hyphenated-style being the two main options. When applying styles directly to an HTML DOM Node using JavaScript, the syntax would be ...

What is the best way to extract data from a JavaScript object received from multer?

Currently, I am facing an issue while trying to utilize multer for handling the upload of a CSV file in Express. The goal is to parse the uploaded file line by line. Although I can successfully retrieve the file as an object stored in req.body, I encounter ...

Make sure link opens in the same window/tab

Currently, I am utilizing the Open Link in Same Tab extension on Google Chrome. This extension can be found here. The purpose of this extension is to ensure that all links open in the same window/tab, which is necessary for touch screen kiosk left/right s ...

avoid selecting a d3 table

I'm currently learning about creating tables in D3 and I have a question regarding when to use ".select()": For example, when constructing circles: var circles = svg.selectAll("circle") .data(dataSet) .enter() .append("circle") .att ...

Order a set of date strings in an array using JavaScript

Despite my attempts with underscorejs, I found that the min and max methods cannot handle strings as they return infinite. Is there a way around this limitation? Here is a sample array: dateData = ["26/06/2016", "04/06/2016", "13/05/2016", "20/07/2016"] ...

Animations within Angular components are being triggered even after the parent component has been removed from

When a child component has an animation transition using query on mat-table rows, hiding the parent component will now trigger the child animation. To see this in action, check out this reproduction scenario: https://codesandbox.io/s/intelligent-jasper-hz ...

Is there a way to send an AJAX request to an MVC action from a JavaScript file?

In a file named job.js, there is code that works perfectly when run on localhost but results in a 404 error when run on an intranet server with an application name. Job.updateJob = function () { $.post('/Builder/ListJobItems', function (dat ...

Implement a React Component as a unique OverlayView within the Google Maps application

Utilizing the Google Maps JavaScript API V3, I have created a map with clustered and draggable map markers. Instead of relying on React libraries that interact with the google maps API, we chose to build our own solution due to limitations in drag function ...

I require assistance in configuring the timing for an animation using Jquery

How can I adjust the timing (delay between two words) for this animation? If you need help, you can check out this link for guidance. Feel free to share your suggestions! ...

What's the most effective method for implementing a stylesheet through Javascript in a style switcher?

I've been tackling the challenge of creating a style switcher for my website. Through utilizing .append() and if and else statements, I managed to make it work successfully. Take a look at the code below: HTML <select name="active_style" id="lol" ...

Access to property 'nodeType' on AJAX request in Firefox has been denied due to permission error

On my webpage, I have integrated the Google Sign-in button along with gapi for interaction. After a successful authentication using the Google API, an AJAX call is made to the server using JQuery: var token = gapi.auth.getToken(); var data = { "to ...

Enhancing elements with fade-in effects upon hovering

Is there a way to incorporate a subtle fade in/fade out effect when hovering over items on this webpage: http://jsfiddle.net/7vKFN/ I'm curious about the best approach to achieve this using jQuery. var $container = $("#color-container"), ...

Transforming a set of properties into an organized array

Looking to transform an object literal that contains inner objects with a "rank" key holding floating point values into an array of these inner objects, sorted by the "rank" value. Input Object: { 452:{ bla:123, dff:233, rank:2 }, 234:{ ...

Executing an Ajax call to trigger a NodeJS function that executes a bash script

I have created a bash script to generate a JSON file that needs to be parsed and sent to the client-side JavaScript for display. My goal is to achieve this without refreshing the page and without using jQuery. I attempted to use Axios but seem to be facing ...