continuously adjust the cost

I'm struggling with incorporating a JavaScript function that is required for my school project. The task at hand is to create a store where the price updates dynamically when quantities are added or removed. The +/- buttons are functioning correctly; however, I am facing issues with updating the price displayed in the 'Add' button.

<button class="buttonshad buttonstyling bg-primary text-light mx-5">Add <a id="changingprice">$6.99</a></button>

https://i.sstatic.net/0b45l.png

Below is the JavaScript code I have been using for increasing and decreasing quantity:

  function increaseValue() {
    value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
  }

  function decreaseValue() {
    value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value < 1 ? value = 1 : '';
    value--;
    document.getElementById('number').value = value;
  }

My main goal is to efficiently update the price displayed in the 'Add' button as quantities are modified.

Answer №1

Here's a fantastic example to spark your creativity.

let starterPrice = 6.99;
document.querySelector("#quantity").addEventListener("change", function(){
  document.querySelector("#updatedPrice span").innerText = (starterPrice * this.value).toFixed(2)
})
#quantity{
  width: 3em;
}
<input type="number" id="quantity" min="0" value="0"/>
<button id="updatedPrice" class="buttonshad buttonstyle bg-primary text-light mx-5">Total $<span>0.00</span></button>

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

Upgrading from ng-router to ui-router in the Angular-fullstack application

issue 1: url:/home, templateUrl: 'index.html is appearing twice. problem 2: views: templateUrl: 'views/partials/main.html is not visible at all. What am I doing wrong? How can I effectively incorporate ui-router into yeoman's angular-fulls ...

handling component interaction with react-redux store

Currently, I am in the process of developing my first significant project using react-redux. While trying to establish state mapping between components in react-redux, I seem to have missed a crucial step. Almost everything is functioning smoothly except ...

Display or conceal several elements using JQUERY/HTML upon hovering

Here is the current progress: <div style="position: relative;"> <a href="#games"> <div class="sidenavOff"> <img src = "images/card_normal.png" /> <img src = "images/category_icons/icon_games.png" style = "position: a ...

Ways to monitor the scores in Player versus Computer matchups

I'm currently working on my first coding challenge and I must admit, as a beginner in coding, I'm struggling with creating a scorecard to track the player versus computer score over a certain number of games. I've tried various methods, inc ...

The process of retrieving keys and values from localStorage in html5

I have stored some important key-value pairs in local storage. Now I need to retrieve both the keys and values, and then display them by appending the values in a list item (li). Currently, my attempt at this looks like: for (var i = 0; i < localStorag ...

What is the best way to activate a JQ function with my submit button?

Is there a way to trigger a JQ function when clicking the submit button in a form? I managed to make Dreamweaver initiate an entire JS file, but not a particular function. ...

Issue with Accordion Panel Content Scroll Bar

Hello there, I've encountered a puzzling problem with my website. My objective is to insert a Time.ly Calendar widget into one panel of my accordion. On this page, "TOURNAMENTS: , the widget appears exactly as desired. However, when I replicate the c ...

Combining PouchDB with Vue.js for seamless integration

Has anyone successfully integrated PouchDB / vue-pouch-db into a Vue.js application before? I encountered an error when attempting to define the PouchDB database. Here are the definitions I tried: import PouchDB from 'pouchDB' or import PouchDB ...

Utilizing AngularJS: Binding stateParams value to custom data within state objects

Following the guidelines here, I am setting a page title in my state object. $stateProvider .state('project', { url: '/projects/:origin/:owner/:name', template: '<project></project>', data : { pageTi ...

Exploring the Fusion of Strings and Arrays of Javascript Objects using jQuery and JSON

Trying to achieve a simple task, but not very proficient in jQuery so struggling to figure it out. Want to send JSON data to an ASP.NET Controller. Data includes strings and a list of objects. The code snippet would appear like this: View: $(document). ...

function executed when meteor template finishes loading all content

Here is a template structure that I am working with: <template name="mainEvents"> <section class="main-events-list events-list js-content-slider"> {{#each events}} <div class="events-list-item"> &l ...

Fill a .js script with moustache.js

I need help with organizing some JavaScript code that needs to access server-side data. I want to keep this code in a separate .js file, but I'm having issues populating it with the necessary server information using moustache. Here is my current setu ...

The defined function in Node.js did not work properly with the callback

This code snippet demonstrates how to use the findOne() method with Node.js and MongoDB. var MongoClient = require('mongodb').MongoClient; MongoClient.connect('mongodb://localhost:27017/blog', function(err, db) { if(err) throw er ...

Navigating safely with the v-model directive in Vue.js

Let's consider the input component below: <input type="text" v-model="example.modules.report.description.title"></input> See full source I don't want to manually define the object structure in the data: example: { modules: { ...

The preflight request for OPTIONS is receiving a 400 bad request error on the secure HTTPS

When making an Ajax call on the front end and calling a WCF service through Ajax, I encountered an issue with adding headers. As a result, a preflight OPTIONS request is triggered but fails due to the URL being blocked by CORS policy. I tried adding the f ...

Prevent user input in calendar view using HTML classes

Need help adding a date picker to my code. Below is the snippet of code: The issue I am facing is that I want to prevent users from manually typing in dates. <div class="form-group clearfix"> <label class="col-lg-4 control-label">Date Sold ...

The system seems to be having trouble locating the password property, as it is returning a value of

I'm currently working on a database project using MongoDB and Node.js. I'm trying to update a specific field, but unfortunately I keep getting an error. The model I am working with is called "ListaSalas": router.post('/updatesala', fun ...

"Unpredictable test failures plaguing my Node.js application with jest and supertest

Recently, I've been working on developing a REST API that accepts a movie title in a POST request to the /movies route. The API then fetches information about that movie from an external API and stores it in a database. Additionally, when you make a P ...

Method for transmitting JSON array from Controller to View using CodeIgniter

I have a function in my controller: function retrieveAllExpenses() { $date=$this->frenchToEnglish_date($this->input->post('date')); $id_user=$this->session->userdata('id_user'); $where=array('date&ap ...

adding content to div is becoming less speedy

Currently, I'm developing a drawing board using only html/css/jquery and the drawing functionality is working smoothly. The approach I've taken involves capturing the mousemove events and placing a dot (div) at each point where the event occurs, ...