我怎么能改变一个数字在html上的一个?

所以我想做一个"添加到购物车"按钮。我已经做了这个按钮，它工作得很好。现在，我想这样做，如果你按下出现的加号按钮，屏幕上的数字将改变1如果你按下减号，数字将改变- 1。我还想让它在数字等于0时返回到初始按钮。下面是我到目前为止用过的代码。

const cartButtons = document.querySelectorAll('.cart-button');
cartButtons.forEach(button => {
button.addEventListener('click', cartClick);
});
function cartClick() {
let button = this;
button.classList.add('clicked');
}

body {
margin: 0;
padding: 0;
height: 100vh;
place-items: center;
background-color: #151515;
}

.cart-button {
position: relative;
padding: 10px;
width: 200px;
height: 60px;
border: 0;
outline: none;
border-radius: 10px;
background-color: #1b6eee;
cursor: pointer;
color: #fff;
transition: 0.3s ease-in-out;
overflow: hidden;
top: 300px;
left: 300px;
}

.cart-button span {
position: absolute;
z-index: 3;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 1.2em;
color: #fff;
}

.cart-button span.add-to-cart {
opacity: 1;
}

.cart-button span.added {
opacity: 0;
}

.cart-button .cart-icon {
position: absolute;
z-index: 2;
top: 50%;
left: -10%;
transform: translate(-50%, -50%);
font-size: 2em;
}

.cart-button .cart-item {
position: absolute;
z-index: 3;
top: -20%;
left: 52%;
transform: translate(-50%, -50%);
font-size: 1.2em;
}

h3 {
display: inline;
color: #fff;
font-size: 2em;
}
.more, .less {
padding: 10px;
width: 60px;
height: 60px;
border: 0;
outline: none;
border-radius: 10px;
background-color: #1b6eee;
cursor: pointer;
color: #fff;
}
div {
position: absolute;
top: 300px;
left: 300px;
opacity: 0;
}
.more {margin-left: 28px;}
.less {margin-right: 28px;}


/*=====animations=====*/

.cart-button.clicked .cart-icon {
animation: cart 3s ease-in-out forwards;
}

.cart-button.clicked .cart-item {
animation: box 3s ease-in-out forwards;
}

.cart-button.clicked span.add-to-cart {
animation: add 3s ease-in-out forwards;
}

.cart-button.clicked span.added {
animation: added 3s ease-in-out forwards;
}
.cart-button.clicked {
animation: but 3s ease-in-out forwards;
}
.cart-button.clicked ~ div {
animation: ml 3s ease-in-out forwards;
}
@keyframes cart {
0% {
left: -10%;
}
20%, 30% {
left: 50%;
}
50%, 100% {
left: 110%;
}
}

@keyframes box {
0%, 20% {
top: -20%;
}
30% {
top: 40%;
left: 52%;
}
50%, 100%{
top: 40%;
left: 112%;
}
}

@keyframes add {
0% {
opacity: 1;
}
10%, 100% {
opacity: 0;
}
}

@keyframes added {
0%, 40% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
@keyframes but {
0%, 80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes ml {
0%, 80% {
opacity: 0;
}
100% {
opacity: 1;
}
}

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/4fc032096b.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<button class="cart-button">
<span class="add-to-cart">Add To Cart</span>
<span class="added">Added</span>
<i class="fas fa-shopping-cart cart-icon"></i>
<i class="fas fa-box cart-item"></i>

</button>

<div>
<button class="less" onclick="minus()">-</button>
<h3 class="number">1</h3>
<button class="more" onclick="plus()">+</button>
</div>

抱歉把所有的东西，但我希望它帮助，如果你能帮助我，我将非常感激!!

const cartDisplay = document.querySelector(".number");
const cartButtons = document.querySelectorAll('.cart-button');
var cartNumber = 1;
cartDisplay.textContent = cartNumber;
cartButtons.forEach(button => {
button.addEventListener('click', cartClick);
});
function cartClick() {
let button = this;
button.classList.add('clicked');
}    
function cartUnclick(){
cartButtons.forEach(button => 
button.classList.remove('clicked'));
}
function plus(){
++cartNumber;
cartDisplay.textContent = cartNumber;
}
function minus(){
if (cartNumber == 1) return cartUnclick()
--cartNumber;
cartDisplay.textContent = cartNumber;
}

这将使得当plus()函数被调用时，cartNumber变量将返回一个自身+ 1的值，如果minus()函数被调用，cartNumber将返回一个自身- 1的值。然后可以通过将显示的textContent赋值给cartNumber来更新它。

如果调用minus()函数时cartNumber为1，则调用cartUnclick函数并"clickked"类;将按钮从按钮中移除。这将使按钮返回到初始状态。谢谢你，祝你有愉快的一天。

您已经声明了两个onClick内联函数减去()和+ ()但还没打。这就是误差。检查javascript并复制粘贴它。我已经测试过了，效果很好。祝你过得愉快……：(也更新了一些HTML。

<div class="add_to_cart">
<button class="cart-button">
<span class="add-to-cart">Add To Cart</span>
<span class="added">Added</span>
<i class="fas fa-shopping-cart cart-icon"></i>
<i class="fas fa-box cart-item"></i>
</button>
<div class="number_wrapper">
<button class="less" onclick="minus()">-</button>
<h3 class="number">1</h3>
<button class="more" onclick="plus()">+</button>
</div>
</div>

添加这些CSS

.add_to_cart {position: relative;}
.add_to_cart .number_wrapper{
dipslay:none;
position: absolute;
top: 300px;
left: 300px;
opacity: 0;
}

的

div {
position: absolute;
top: 300px;
left: 300px;
opacity: 0;
}

//这里是JavaScript

const cartButtons = document.querySelectorAll('.add_to_cart');
cartButtons.forEach(cartBtn => {
let number_wrapper = cartBtn.querySelector('.number_wrapper');
let button = cartBtn.querySelector('.cart-button');
button.addEventListener('click', (event)=>{
button.classList.add('clicked');
number_wrapper.style.display = "block";
setInterval(()=>{
if(parseInt(number.innerHTML) == 0){
number_wrapper.style.display = "none";
button.classList.remove('clicked');
number.innerHTML = 1;
}
},0);
});
});
let number = document.querySelector('.number');
function minus(){
number.innerHTML = parseInt(number.innerHTML) -1;
}
function plus(){
number.innerHTML = parseInt(number.innerHTML) +1;
}

相关内容

最新更新

热门标签：