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

Question

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

javascript html css list onclick

Answer 1

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

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 3

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... -->

Answer 4

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... -->

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

Answer №1

Answer №2

Similar questions

JavaScript accordions failing to open

Ways to structure this updateone query for mongoose formatting

designing a modular socket.io framework in node.js

In main.js within the Google Maps API, an error is triggered when trying to setDraggable(false) on a

Is there a way to efficiently eliminate any unnecessary spaces, tabs, line breaks, and other unwanted characters from an input in order to sanitize a Python stdin input?

What could be causing this Ajax error I'm experiencing?

When implementing flex-grow 1 on a flex box, the remaining space is not being filled as expected

Obtain the month, day, or year from a timestamp

Adjusting the appearance of a JavaScript element based on its hierarchy level

Is it possible to use a Proxy-object instead of just an index when changing tabs in material-ui/Tabs?

What is the best way to trigger a jQuery UI dialog using an AJAX request?

When the cursor is placed over it, a new div is layered on top of an existing

Tips for adjusting the content direction of a Popover

Is there a way I can edit this text on the backend page?

What is the best way to find the index of the smallest value in an array using JavaScript?

Can we leverage Angular service styles in scss?

Updating the UI in Angular for keyboard events is not working as expected

Utilize ReactJS and AJAX to easily upload images

applying conditional rendering in vue.js

What is the process for altering fonts in a Chrome OS application?