I'm trying to update item totals when an image card is clicked and update the corresponding totals and prices in an order panel. See screenshot.
I'm currently incrementing the quantity total onclick in the black circle qty-icon div on the image card using the "Update food quantity" function below which increments the number, but how do I pass that incremented value to the "0 Items" field in the add-order-panel panel at the bottom and update the price in "Add to Order"?
Link to GitHub repo
Live GitHub page
// Update food quantity
$(function() {
$('.food-container').click( function() {
var num = $(this).find('.qty-icon');
num.text( parseInt(num.text()) + 1 );
});
});
<!-- Sliders -->
<div class="food-container">
<div class="food-icon">
<div class="qty-icon">0</div>
<img src="images/food/icons/sliders.png" alt="">
</div>
<div class="food-details">
<div class="food-title left">
<h4>Sliders</h4>
</div>
<div class="food-title right">
<h4>$5</h4>
</div>
</div>
</div>
<!-- Add to Order Panel -->
<div class="add-order-panel down">
<!-- Order Buttons -->
<div class="order-buttons">
<a href="#">
<div class="order-but-container one">
<h4><span class="bold-cash">0</span> Items</h4>
</div>
</a>
<a href="#">
<div class="order-but-container two">
<div class="order-label">
<h4>Add to Order</h4>
</div>
<div>
<h4><span class="bold-cash">$0</span></h4>
</div>
</div>
</a>
</div>
</div>
You can use .each loop to iterate through your food-container div then inside this you need to get qty ,price and add them to some variable . Finally ,show these values insid your total & item quantity spans.
Demo code :
$(function() {
$('.food-container .qty-icon').click(function() {
var num = $(this);
num.text(parseInt(num.text()) + 1);
var qty = 0;
var total = 0;
//loop through your food conatiner divs
$(".food-container").each(function() {
//add total qty on evry iteration
qty += parseInt($(this).find(".qty-icon").text())
//get actual qty
var qty_of_item = parseInt($(this).find(".qty-icon").text())
//mutliply it with price add total
total += parseInt($(this).find('.price').text().replace('$', '')) * qty_of_item;
})
$(".order-but-container.one .bold-cash").text(qty); //set new qty
$("#total").text("$" + total) //set total
});
});
.food-container {
width: 105px;
height: 150px;
border: 1px solid blue;
margin-bottom: 5px
}
.food-icon {
text-align: right;
font-size: 20px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Order Buttons -->
<div class="order-buttons">
<a href="#">
<div class="order-but-container one">
<h4><span class="bold-cash">0</span> Items</h4>
</div>
</a>
<a href="#">
<div class="order-but-container two">
<div class="order-label">
<h4>Add to Order</h4>
</div>
<div>
<!--added here id-->
<h4><span id="total" class="bold-cash">$0</span></h4>
</div>
</div>
</a>
</div>
<div class="food-container">
<div class="food-icon">
<div class="qty-icon">0</div>
<img src="images/food/icons/sliders.png" alt="">
</div>
<div class="food-details">
<div class="food-title left">
<h4>pizza</h4>
</div>
<div class="food-title right">
<!--added here class-->
<h4 class="price">$10</h4>
</div>
</div>
</div>
<div class="food-container">
<div class="food-icon">
<div class="qty-icon">0</div>
<img src="images/food/icons/sliders.png" alt="">
</div>
<div class="food-details">
<div class="food-title left">
<h4>burger</h4>
</div>
<div class="food-title right">
<h4 class="price">$5</h4>
</div>
</div>
</div>
<div class="food-container">
<div class="food-icon">
<div class="qty-icon">0</div>
<img src="images/food/icons/sliders.png" alt="">
</div>
<div class="food-details">
<div class="food-title left">
<h4>somethings</h4>
</div>
<div class="food-title right">
<h4 class="price">$5</h4>
</div>
</div>
</div>
<div class="add-order-panel down">
You're over thinking it :) You're already storing the element your wanting into a variable called "num". Then you're grabbing the text inside of it. Here's what you do.
redefine num to be the text of the element.
do this for every other element you want to update the text for.
then add all of the values of those inside the function.
save that in a var called total and update that in the area where the total should be
make sure to start total at 0 every time the function runs or you will compound the value
note you'll want to declare all of your variables globally and then update them locally. Don't declare any variables locally or they will come back undefined when you try to update them in other functions
$(function() {
let total = 0
$('.food-container').click( function()
{var num = $(this).find('.qty-icon');
num = num.text( parseInt(num.text()) + 1 );
total = num + otherVar + yetAnotherVar});});
Related
I have 2 columns with same ID, each have 1 button. How to run a function when one button is clicked without changing other ID values?
Here is my code:
<div class="row">
<!--- column 1 ------>
<div class="column nature">
<div class="content">
<img src="images/pic.jpg" alt="Jane" style="width:100%">
<div class="container">
<p class="title" style="text-align:center;">SCA5-01</p>
<div style="text-align:center;">
<div id="hrg" style="font-size:5vw;font-weight:bold;">2000</div>
<div id="per">/500</div>
</div>
<div style="width:100%;margin:0px 5%;display:block;">
<div style="font-size:2vw;">
<br>Spect :
<br>- New
<br>- Fresh
</div>
</div>
<p>
<div style="width:100%;margin:0px auto;text-align:center;">
<input id="jmlh" type="number" value="500" style="width:50%;">
<button onclick="price();">chek</button>
</div>
</p>
<p>
<button class="button">Order</button>
</p>
</div>
</div>
</div>
<!--- column 1 ------>
<div class="column nature">
<div class="content">
<img src="images/pic.jpg" alt="Jane" style="width:100%">
<div class="container">
<p class="title" style="text-align:center;">SCA5-01</p>
<div style="text-align:center;">
<div id="hrg" style="font-size:5vw;font-weight:bold;">2000</div>
<div id="per">/500</div>
</div>
<div style="width:100%;margin:0px 5%;display:block;">
<div style="font-size:2vw;">
<br>Spect :
<br>- New
<br>- Fresh
</div>
</div>
<p>
<div style="width:100%;margin:0px auto;text-align:center;">
<input id="jmlh" type="number" value="500" style="width:50%;">
<button onclick="price();">chek</button>
</div>
</p>
<p>
<button class="button">Order</button>
</p>
</div>
</div>
</div>
</div>
Here is my function:
<script>
function price(){
var qty = document.getElementById("jmlh").value;
var prc = Math.ceil((1000000 / qty)/100)*100;
document.getElementById("hrg").innerHTML = prc;
document.getElementById("per").innerHTML = "/" + qty;
}
</script>
The problem here is that function only runs on 'column 1' & doesn't work on 'column 2'.
Where exactly am I going wrong?
id should be unique in the same document. Use classes or other attributes instead of id.
If you want centralized function to handle clicks, submit the clicked element itself to that function, so it would know which column was clicked:
<div class="column nature">
<div class="content">
<img src="images/pic.jpg" alt="Jane" style="width:100%">
<div class="container">
<p class="title" style="text-align:center;">SCA5-01</p>
<div style="text-align:center;">
<div class="hrg" style="font-size:5vw;font-weight:bold;">2000</div>
<div class="per">/500</div>
</div>
<div style="width:100%;margin:0px 5%;display:block;">
<div style="font-size:2vw;">
<br>Spect :
<br>- New
<br>- Fresh
</div>
</div>
<p>
<div style="width:100%;margin:0px auto;text-align:center;">
<input class="jmlh" type="number" value="500" style="width:50%;">
<button onclick="price(this);">chek</button>
</div>
</p>
<p>
<button class="button">Order</button>
</p>
</div>
</div>
</div>
function price(el){
const elContainer = el.closest(".container");// find parent
var qty = elContainer.querySelector(".jmlh").value;
var prc = Math.ceil((1000000 / qty)/100)*100;
elContainer.querySelector(".hrg").innerHTML = prc;
elContainer.querySelector(".per").innerHTML = "/" + qty;
}
Note, that all id were replaced by class attribute and in javascript instead of searching entire document with document.getElementById() it's now only searching children inside the .container element.
I need to pass this element to another active div when i click on the cart i made an e-commerce website
HTML the cart div is active and the cart the box is addto
<div class="active">
<div class="text">
<i class="fa-solid fa-x xmark"></i>
</div>
</div> // this is the cart
<div class="row">
<div class="col col">
<div class="image">
<img src="img/products/f1.jpg" alt="">
</div>
<div class="text">
<h1>T-shirt</h1>
<i class="fa-solid fa-cart-shopping addto"></i>
</div>
</div>
<div class="col col1">
<div class="image">
<img src="img/products/f1.jpg" alt="">
</div>
<div class="text">
<h1>T-shirt2</h1>
<i class="fa-solid fa-cart-shopping addto"></i>
</div>
</div>
</div>
JS
let cart = document.querySelector(".cart");
let cartPage = document.querySelector(".active");
let xMark = document.querySelector(".xmark");
let col1 = document.getElementsByClassName("col1")
let addTo = Array.from(document.getElementsByClassName("addto"));
cart.addEventListener("click",function(){
cartPage.style.width = "30%";
cartPage.style.opacity = "1";
cartPage.style.zIndex = "10";
});
xMark.addEventListener("click",function (){
cartPage.style.width = "0";
cartPage.style.opacity = "0";
cartPage.style.zIndex = "-1";
});
i need when i click on addto variable i need to append the col1 to the cartPage
Here is my HTML and Javascript code, and basically as you can see currently what it does is show/hide a row of 3 images upon button click.
Thing is, that there are another 2 rows just like this one and I need to know how I can change the javascript code to make the show/hide thing work for all of them.
I know it has something to do with looping through an array of buttons, but I have no idea of Javascript.
Here it is :
<style>
.show-tapas{
display: none;
}
.show-tapas.showing{
display: block;
}
</style>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_1_0.jpeg">
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_2_0.jpeg">
</div>
</div></div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_3_0.jpeg">
</div>
</div></div>
</a>
</div>
</div>
<script>
var a = document.querySelector('.load-more-button');
var b = document.querySelector('.show-tapas');
a.addEventListener("click",function(e){
e.preventDefault
b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");
})
</script>
Thank you very much!!!
In this code I only see one row with the class .show-tapas.
Anyway, you should use querySelectorAll to take every matched items.
var button = document.querySelector('.load-more-button');
var tapas = document.querySelectorAll('.show-tapas');
button.addEventListener("click",function(e){
tapas.forEach(b => $(b).toggle());
})
Pro-tip: If you have JQuery you might consider using $(b).toggle() instead of b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");
i am trying this code in an angular project but not working, although it does in an HTML template
the main goal of the code is to make the div to fit with its content
function resizeGridItem(x,item){
console.log('resizeGridItem')
grid = $(".grid")[0];
// console.log(grid)
rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
console.log('rowHeight '+rowHeight)
rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
console.log('rowGap '+rowGap)
// console.log('item is ')
// console.log(item)
rowSpan = Math.ceil((item.querySelector('.card-content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
console.log('getBoundingClientRect '+item.querySelector('.card-content').getBoundingClientRect().height)
console.log('rowSpan '+rowSpan)
item.style.gridRowEnd = "span " + rowSpan;
}
//
function resizeAllGridItems(){
console.log('resizeAllGridItems')
allItems = document.getElementsByClassName("card");;
console.log(allItems.length)
for(x=0;x<allItems.length;x++){
resizeGridItem(x,allItems[x]);
}
}
$(document).ready(function () {
window.onload = resizeAllGridItems();
})
as you can see i tried to print the results
both rowGap and rowHeight have the same value in both projects
but the final one rowSpan and the query selector height are not!
the HTML Code
<div class="grid">
<div class="card">
<div class="card-content show">
<div class="card-header">
<img src="user1.jpg">
<div class="title">
<div class="publisher">
<p>Publisher name</p>
<p>1 hrs</p>
</div>
</div>
</div>
<img class="photothumb" src="cake4.jpg"/>
<div class="card-interaction">
<span>30 Comments | 512 Views </span>
<span><img src="assets/images/like.png"> 61 </span>
<span><img src="assets/images/dislike.png"> 61 </span>
</div>
</div>
</div>
<div class="card">
<div class="card-content show">
<div class="card-header">
<img src="user1.jpg">
<div class="title">
<div class="publisher">
<p>Publisher name</p>
<p>1 hrs</p>
</div>
</div>
</div>
<img class="photothumb" src="cake.jpg"/>
<div class="card-interaction">
<span>30 Comments | 512 Views </span>
<span><img src="assets/images/like.png"> 61 </span>
<span><img src="assets/images/dislike.png"> 61 </span>
</div>
</div>
</div>
</div>
photo of the view will be added if necessary
I am using Dragula with Angular7 and dragula is not updating the list sorting even after drag and drop event successfully emitted.
Here, is my code :
dragula.view.html
<div class="portlet-content doc-portlet">
<div dragula="one-bag" [(dragulaModel)]="fileList" (dragulaModelChange)="fileList = $event">
<div class="elementline " *ngFor="let item of fileList">
<div class="extra-pages-portlet-content">
<div class="thumb-box left-col">
<a href="{{item.file_url}}{{item.file}}" target="_blank">
<img [src]="item.complete_url" height="100%" width="100%">
</a>
</div>
<div class="right-col thumb-info">
<div class="icon-row">
<div class="icon" style="float:right;">
<span style="cursor:grabbing; float:right;">
<img src="../../assets/images/move.png" height="16" width="16" class="iconDelete-update">
</span>
</div>
</div>
<div class="text-and-input-field">
<span class="text-detail-portlet" style="float:left;">Seconden: </span>
<div class="input-field">
<input type="text" [(ngModel)]="item.slide_duration" class="text-right-Detail-user" placeholder="-" style="width:100%; text-align:right;">
</div>
</div>
</div>
</div>
</div>
</div>
dragula.component.ts
dragulaService.setOptions('one-bag', {})
dragulaService.drop.subscribe((value:any) => {
var counter = 0;
for(var j=0; j < this.fileList.length;j++) {
this.fileList[j].narrowcasting_slide_order = counter;
counter++;
}
});
I am dragging and dropping the items in the list, but dragula is not updating the list sorting order.
Can somebody provide me any solution on this?