Quantity display issue in jQuery list

Question

Quantity display issue in jQuery list

As someone who is new to jQuery and coding in general, I have spent several days working on a shopping list App using jQuery. While I have made progress, there are two specific issues that I am struggling with.

The quantity selector has been successfully implemented, but after selecting a number quantity and adding it, the item does not show up on my list. I'm having difficulty identifying where exactly I need to add the proper string in order for the quantity to appear in the list when the add button is clicked.

To view my code Demo, click here: http://jsbin.com/cetisobuhe/edit?html,js,output

javascript jquery html css

Answer 1

Answer №1

You have overlooked adding the value of the second <input />:

let task = $('input').val() + ": " + $('input + input').val();

The code above seems to work in your current setup, although it's not quite right. Take a look at this:

Result:

Improved Version

Instead of the following structure:

<input type="text" id="new-text" placeholder="Add item to list"/>
<input type="number">

var new_task = $('input').val() + ": " + $('input + input').val();

It would be more beneficial to utilize:

<input type="text" id="new-text" placeholder="Add item to list" />
<input type="number" id="quantity" />

let task = $('#new-text').val() + ": " + $('#quantity').val();

Answer 2

You have overlooked adding the value of the second <input />:

let task = $('input').val() + ": " + $('input + input').val();

The code above seems to work in your current setup, although it's not quite right. Take a look at this:

Result:

Improved Version

Instead of the following structure:

<input type="text" id="new-text" placeholder="Add item to list"/>
<input type="number">

var new_task = $('input').val() + ": " + $('input + input').val();

It would be more beneficial to utilize:

<input type="text" id="new-text" placeholder="Add item to list" />
<input type="number" id="quantity" />

let task = $('#new-text').val() + ": " + $('#quantity').val();

Quantity display issue in jQuery list

Answer №1

Similar questions

What is the best way to navigate through a div element contained within another div element using jQuery

Navigate the scroll bar horizontally one by one instead of all at once, due to a width problem

Displaying the recorded text in red when the stop button is clicked

Learn the steps to implementing AJAX into a shopping cart using CodeIgniter

Unsure how to proceed with resolving lint errors that are causing changes in the code

To restore the position of the chosen object in Three.js after clicking reset

Transforming JSON object to an array of arrays using JavaScript

Establishing a read stream from a folder and transferring the entire contents of the folder to a MongoDB Bucket

What is the process of combining two objects in TypeScript?

Utilizing jQuery Methods within Node.js

Having difficulties creating an HTML SVG Welcome screen

The background image spanning across the entire screen, not just confined to the center

Retrieve the attribute value from an HTML element in a JSON response using JavaScript

Ajax requests that are delayed to the same URL with identical data

What is the best way to navigate from the current node to its parent node using xpath?

Forwarding to another servlet based on the action of an HTML page

Reordering items within an array of objects using JavaScript

The image fails to appear while creating a PDF in AngularJS using pdfmake

Jquery Tablesorter no longer supports the StickyHeaders widget

I am in search of a specialized 3D camera with a unique effect