I have a script to add or remove a number. This is working on the first modal but on the second model it stops working. I think it might have to do with the window onload taking the first id and then the second time it stops? How to solve this ? if i make the id’s variable the script will not find the id’s…
script
window.onload=function(){
var minusBtn = document.getElementById("minus"),
plusBtn = document.getElementById("plus"),
numberPlace = document.getElementById("numberPlace"),
submitBtn = document.getElementById("submit"),
number = 0, /// number value
min = 0, /// min number
max = 30; /// max number
minusBtn.onclick = function(){
if (number>min){
number = number-1; /// Minus 1 of the number
numberPlace.innerText = number ; /// Display the value in place of the number
}
if(number === min) {
numberPlace.style.color= "red";
setTimeout(function(){numberPlace.style.color= "black"},500)
}
else {
numberPlace.style.color="black";
}
}
plusBtn.onclick = function(){
if(number<max){
number = number+1;
numberPlace.innerText = number ; /// Display the value in place of the number
}
if(number === max){
numberPlace.style.color= "red";
setTimeout(function(){numberPlace.style.color= "black"},500)
}
else {
numberPlace.style.color= "black";
}
}
submitBtn.onclick = function(){
if (number > 1){
alert( number + " items " + " has been added to basket");
}else{
alert( number + " item " + " has been added to basket");
}
}
}
Laravel blade page (see id Maindiv)
@extends('frontend.index')
@section('content')
@foreach($products as $product)
<article class="col-12 col-lg-3 d-flex justify-content-center mb-2 sbcard1 ">
<div class="card text-center sbcardhome" style="width: 18rem;">
<a href="{{route('frontend.detailpage', $product)}}"><img
src="{{$product->photo ? asset($product->photo->file) : 'http://via.placeholder.com/62'}}"
class="card-img-top img-fluid" alt="{{$product->name}}"></a>
<div class="card-body">
<a id="brownbear" href="{{route('frontend.detailpage', $product)}}"><h5
class="card-title fs-6">{{$product->name}}</h5></a>
<a id="brownbearprice" href="{{route('frontend.detailpage', $product)}}"><p
class="card-text fw-bold">€ {{$product->price}}</p></a>
<button type="button" class="btn btn-danger text-center mt-lg-3">Add To Cart</button>
<div class="box1" id="ease-in1">
<ul class="add-to-links1">
<li class="mb-3">
<a title="Add to wishlist" href="#"><i class="bi bi-heart text-black"></i></a>
</li>
<li class="compare mb-3">
<a title="Add to compare" href="#" class=""><i
class="bi bi-arrow-clockwise text-black"></i></a>
</li>
<li class="quick-view mb-1">
<a data-bs-toggle="modal" data-bs-target="#staticBackdrop{{$product->id}}"
title="Quick view" class="quick_view" href="#"><i
class="bi bi-eye text-black"></i></a>
</li>
</ul>
<div class="modal fade" id="staticBackdrop{{$product->id}}" data-bs-backdrop="static"
data-bs-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel{{$product->id}}" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="staticBackdropLabel{{$product->id}}">{{$product->name}}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body ">
<article id="detail" class="container my-5 popreg">
<div class="row">
<div class="d-flex">
<div class="col-lg-6">
<img class="img-fluid" id="custommug"
src="{{$product->photo ? asset($product->photo->file) : 'http://via.placeholder.com/62'}}"
alt="customizable">
</div>
<div class="col-lg-6 text-center text-lg-start">
<h1 class="fs-3 my-3">{{$product->name}}</h1>
<p><small><span
class="popbold">Reference: </span>{{$product->id}}
</small></p>
<p class="popbold fs-3 my-3">€ {{$product->price}}</p>
<p class="fs-6">{{$product->description}}</p>
<hr>
<div id="detailaddtocart" class="row my-2">
<div id="mainDiv" class="col-lg-3 my-lg-2 col-4 ">
<button id="minus">-</button>
<span id="numberPlace">0</span>
<button id="plus">+</button>
</div>
<div class="col-lg-9 col-8 ">
<button id="submit"
class="btn btn-danger add-to-cart my-lg-2"
data-button-action="add-to-cart" type="submit">
<i class="bi bi-plus-circle"></i>
Add to cart
</button>
</div>
</div>
<div class="row my-3 ">
<div class="col-lg-4 col-6"><i
class="bi bi-suit-heart me-lg-2"></i><a
id="detailwish" href="#">Add to wishlist</a></div>
<div class="col-lg-8 col-6"><i
class="bi bi-arrow-clockwise me-lg-2 text-black"></i><a
id="detailcompare" href="#">Add to compare</a></div>
</div>
<div class="row">
<div class="col-lg-12 fs-4">
<p class="popbold">Share</p>
<a id="facebook" href="#"><i
class=" bi bi-facebook mx-2 "></i></a>
<a id="twitter" href="#"><i
class="bi bi-twitter mx-2 "></i></a>
<a id="google" href="#"><i
class="bi bi-google mx-2 "></i></a>
<a id="instagram" href="#"><i
class="bi bi-instagram mx-2 "></i></a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
<p class="discountbtn">{{$product->brand->name}}</p>
<p class="new">{{$product->category->name}}</p>
</div>
</div>
</article>
@endforeach
@endsection
