In JavaScript, the addition and subtraction buttons may become disabled after nested lists are used

Recently, I embarked on a project to enhance the functionality of restaurant table items and implement value-saving features.

Initially, everything worked smoothly with one item list. However, upon introducing a second list and attempting to manipulate items through buttons, the quantity would increase/decrease while the total sum remained unchanged.

While new items are accurately reflected in the sum, manipulating existing ones seems to be causing issues.

If you add the provided code snippet, you can run it yourself to observe this behavior.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Prototype</title>
    <style>
        // CSS styles here
    </style>


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

</head>
<body onload="init()">
// HTML structure and script calls here

Thank you for your assistance!

// Embedded JavaScript functions and CSS styles

javascripthtmlcsslistonclick

Answer №1

Once categories have been included, the 'inventory' array now contains 2 named properties:

[Softdrinks: Array(2), Juice: Array(3)]

Therefore, when searching for a price in checkPrice(), make sure to not include the list of products in the initial loop. Here's how you can do it:

function checkPrice(itemName) {
    let itemPrice = 0;

    for(let category in inventory){
      for(let product of inventory[category]){
          if(product.name === itemName){
              itemPrice = product.price;
              break;
          }
      }
    }

    return itemPrice;
}

Answer №2

Adjust the iteration of products in the findPrice() function.

The products variable contains a first-level object with nested lists of values. To access this information, you will need two nested for loops.

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8>
    & lt;title>Prototyp</title>
    <style>
        .table{
        text-align:center ;
        line-height:9vh ;
        height:10vh ;
        }
        
        .tablei{
        background-color:#e58e26 ;
        font-size:44pt ;
        }
        
        .
        ..
        ..

         
        

<!-- HTML content continues... -->

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

Utilizing data compression techniques to minimize network bandwidth consumption

Imagine this scenario: I have a considerable amount of data (greater than KB/MB) that needs to be transferred from an ajax request in JavaScript to a webpage in PHP. Would it be beneficial to compress the data using JS scripting before sending it to the se ...

javascriptajaxapachecompression

Eliminating quotation marks from individual elements within a JavaScript array that includes JSON-encoded HTML strings retrieved from a MySQL database using PHP

Performing an Ajax call to fetch data from a MySQL database using the data1.php file with PDO results in HTML strings being stored in an array, encoded into JSON format, and then sent to the Ajax response function for display on a webpage. However, dealing ...

phphtmljsonajaxquotes

What are some effective methods for dynamically styling elements during iteration?

Need assistance with styling dynamic elements during iteration Located on the test.phtml page <?php foreach($tests => $test) { ?> <li class="<?php echo $test['class'] ?>"> <a href="#" title=""> Test In ...

htmlcssiteration

Guide to configuring an Angular Material Footer using Flex-Layout

Could someone help me with setting up the footer in my Angular Material app? I want it to: stick to the bottom when the content height is smaller than the view-port move down or get pushed down when the content height exceeds the view-port One important ...

htmlcssangularangular-materialangular-flex-layout

What are the steps to establish a Z-axis coordinate system in three.js?

When working with three.js, the Y axis typically represents up and down, while the Z axis represents forward and backward. However, I want to switch this so that the Z axis represents up and down, and the Y axis represents forward and backward. Here is an ...

javascriptgraphics3dthree.jswebvr

The path('/') in $rootScope is not functioning properly

Below is a function called register() that I am working with. <form class="form-auth" ng-submit="register()"> This is how I have defined the register function: $scope.register = function(){ $http.post('/auth/signup', $scope.user).success ...

javascriptangularjsmean

Is there a way to include an image in a serialized file?

What is the method to include image_form into form in Django? form - form.serialize() image_form - image $('#id_submit').click(function(e) { e.preventDefault(); var form = $('form').serialize(); image_form = $("#id_image")[0].f ...

javascriptjquerydjangoajaxserialization

Guide to creating a rising or waving effect for text using CSS or JavaScript without the need for animation

Is there a way to style dynamic text like this using HTML? I'm open to using CSS or Javascript, as long as it does not involve animation. ...

javascripthtmlcss

What could be the reason for the esm loader not recognizing my import?

Running a small express server and encountering an issue in my bin/www.ts where I import my app.ts file like so: import app from '../app'; After building the project into JavaScript using: tsc --project ./ and running it with nodemon ./build/bin ...

javascripttypescriptexpressnode-modules

Before clicking the submit button, send field values using Ajax

Is it possible to send values using ajax before submitting form data with a submit button? I have the code below. It successfully reaches the success function, but I am unable to retrieve the posted data. Any ideas on how to solve this issue? Your help an ...

javascriptphpjqueryajaxforms

Guide to loading a minified file in Angular 2 with Gulp Uglify for TypeScript Bundled File minimization

In my Angular 2 application, I have set the TypeScript compiler options to generate a single outFile named Scripts1.js along with Scripts1.js.map. Within my index.html file: <script src="Scripts/Script1.js"></script> <script> ...

javascripttypescriptangulargulpgulp-uglify

Mapping JSON schema to typed JavaScript objects

Are there any tools available to generate JavaScript typed objects (JS functions) from a JSON schema? Essentially, looking for the JS equivalent of this http://code.google.com/p/jsonschema2pojo/. Thank you. EDIT: Starting with: { "description": "An ...

javascriptjsoncode-generation

Unexpected behavior of ion-select: No rendering of selected value when applied to filtered data

I came across an unexpected issue with the dynamic data filtering feature of ion-select. In my application, users are required to choose three unique security questions during registration. I have an array of available questions: questions: Array<{isSe ...

javascriptangularionic2

Having trouble displaying a background image with CSS

When I open Chrome from my code editor (WebStorm), the header image shows up perfectly. However, after closing WebStorm and manually opening index.html from my project folder, the header image fails to load/display. The CSS for the background image is bac ...

css

Creating dynamic selection options in an HTML select tag using PHP

When retrieving category and sub-category information from an API json file, the API returns category objects with a "parent" attribute. Main category objects have a parent attribute equal to 0, and sub-category objects have the parent attribute equal to t ...

javascriptphphtmljquerydrop-down-menu

Steps for storing API information in localStorage:1. Retrieve the API data

My app is running sluggish due to the excessive API calls for information retrieval. To optimize performance, I want to create a unified object containing all the data that can be shared across pages and accessed from localStorage, thus enhancing the app ...

javascriptangulartypescriptionic-framework

Why does the output still show [1, 2] even after deleting list2 from list1 and printing list1?

Running this code: list2=[1,2] list1=list2 del list2 print(list1) I am curious why the output is [1,2]. In my understanding, when a list is deleted like in the case of list2, the memory location should no longer exist, so I expected list1 to be undefined ...

pythonlist

Ensure that a div element expands to 100% of its parent's height when its child's height is less than 100%

I am struggling with a flex div that contains 2 elements. I want both elements to take up the full parent height while their content remains at auto height, but I keep getting the inner content height. Here is my code: <html lang="en"> <head&g ...

htmlcss

Tips for positioning a sticky div underneath a stationary header

I'm currently utilizing Bootstrap 4 for my project, and I am encountering an issue with maintaining a div that has the class "sticky-top" just below a fixed navbar. Despite attempting to use JavaScript to replace the CSS while scrolling, it hasn' ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Experiencing difficulty aligning the Material UI grid to float on the right side

I'm currently in the learning phase of material-ui and encountering an issue with floating the grid content to the right side. Despite trying alignItems="flex-start" justify="flex-end" direction="row" in the container grid, as well as using the css p ...

cssreactjsmaterial-ui