在這里，我有一個電子商務網站（用于練習）。我輸入到螢屏上的資料來自 JSON。但我遇到的問題是我有一個將商品添加到購物車的功能。在他們添加的每個專案中，他們都有一個名稱、價格和數量。那么問題是，每次用戶添加一個專案時，輸入值都會變回 1，因為這是我在內部 HTML 中設定的初始值，如何將其設定為輸入與用戶輸入的內容保持相同的位置公開批評，在這里學習！
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce Website</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css">
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul >
<div >
<li ><a href="www.google.com">Home</a></li>
<li ><a href="www.google.com">Shop</a></li>
</div>
<div >
<li><i ></i></li>
<!-- <div > -->
<div ><h1 >X</h1>
<h1 >Your Items</h1>
<div >
<!-- <div ><img src="./md-salman-tWOz2_EK5EQ-unsplash.jpg" alt="如何將輸入值保存到 DOM 并且在每個函式之后都不重置它們" ><h1 >Bob</h1><h2 >3.99</h2><input type="number" value="1" ><button >Remove</button></div> -->
</div>
<h1 >$0</h1>
</div>
<!-- </div> -->
</div>
</ul>
<div >
<div data-glide-el="track">
<ul >
<div >
<li ><img src="./md-salman-tWOz2_EK5EQ-unsplash.jpg" alt="如何將輸入值保存到 DOM 并且在每個函式之后都不重置它們"><h1 >Come try our new items</h1>
</li>
</div>
<div >
<li ><img src="./md-salman-tWOz2_EK5EQ-unsplash.jpg" alt="如何將輸入值保存到 DOM 并且在每個函式之后都不重置它們"><h1 >Slide 2</h1>
</li>
</div>
<div >
<li ><img src="./md-salman-tWOz2_EK5EQ-unsplash.jpg" alt="如何將輸入值保存到 DOM 并且在每個函式之后都不重置它們"><h1 >Slide 3</h1>
</li>
</div>
</ul>
</div>
<div data-glide-el="controls">
<button data-glide-dir="<">prev</button>
<button data-glide-dir=">">next</button>
</div>
</div>
<!-- ITEM TABS -->
<ul >
<li >All</li>
<li >New</li>
<li >Sales</li>
<li >Best</li>
</ul>
<div >
</div>
</div>
</body>
<script src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script>
<script>
const config = {
type: 'carousel',
startAt: 0,
perView: 1,
}
new Glide('.glide', config).mount()
</script>
<script src="ProductsData.json"></script>
</html>
CSS：
*{
padding: 0;
margin: 0;
box-sizing: border-box;
overflow-x: hidden;
}
::-webkit-scrollbar{
display: none;
}
a{
text-decoration: none;
color: black;
}
.navbar li{
list-style: none;
color: black;
font-size: 1.5rem;
margin: 1.2em;
transition: 0.1s ease;
}
.navbar i{
color: black;
z-index: 2;
cursor: pointer;
}
.navbar{
background-color: white;
position: fixed;
z-index: 100;
width: 100vw;
display: flex;
justify-content: space-around;
align-items: center;
transition: 0.6s ease-in-out;
background-color: rgb(241, 241, 241);
height: 8vh;
}
.navbar li:hover{
border-bottom: 2px solid black;
}
.leftside{
display: flex;
gap: 3em;
transform: translateX(-10%);
}
.rightside{
position: relative;
}
.glide{
width: 75vw;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-top: 8vh;
}
.glide img{
height: 70vh;
width: 100%;
object-fit: cover;
background-size: cover;
background-position: center;
}
.slide{
position: relative;
width: 100%;
}
.slidertitle{
font-size: 3.5rem;
font-weight: bold;
color: white;
transform: translate(10vw, -50vh);
}
.cartbody{
width: 30vw;
background-color: rgb(105, 105, 105);
height: 100vh;
position: fixed;
top: 0;
left: 70%;
transform: translateX(00%);
transition: 0.3s ease-in-out;
}
.cartactive{
transform: translateX(0%);
}
.cartitem{
color: white;
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 1em 0em;
}
.exiticon{
font-size: 3rem;
position: absolute;
top: 1%;
left: 5%;
cursor: pointer;
}
.carttitle{
width: 100%;
color: white;
padding-top: 1em;
padding-bottom: 2em;
text-align: center;
}
.cartitemname{
font-size: 1.8rem;
}
.cartbody input{
width: 30px;
}
.cartitemprice{
font-size: 1.2rem;
}
.cartitemimg{
height: 80px;
width: 80px;
}
.removecartbtn{
background-color: red;
border: none;
padding: 0.5em;
font-size: 1rem;
color: white;
font-weight: bold;
cursor: pointer;
}
.cartitems{
height: 55vh;
}
.totalcartprice{
width: 100%;
background-color: rgb(0, 26, 255);
color: white;
text-align: center;
padding: 0.5em 0em;
position: absolute;
top: 75%;
}
.itemtabcontainer{
display: flex;
height: 3.5vh;
width: 100vw;
justify-content: space-evenly;
margin-bottom: 5em;
}
.itemtab{
font-size: 1.3rem;
cursor: pointer;
}
.itemtabcontainer .active{
border-bottom: black 2px solid;
}
.itemimg{
height: 60%;
width: 100%;
}
.itemscontainer{
display: grid;
grid-template-columns: repeat(4, 200px);
height: 100vh;
margin: auto;
width: 70vw;
justify-content: space-around;
overflow-y: hidden;
}
.topitemcontainer{
padding: 1.2em 0em;
width: 100%;
display: flex;
justify-content: space-around;
}
.item{
height: 400px;
width: 250px;
margin-bottom: 1em;
padding-bottom: 1em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.atcbtn{
cursor: pointer;
background-color: white;
border: none;
border: 2px solid black;
padding: 0.3em;
font-size: 1.2em;
transition: .4s ease-in-out;
}
.atcbtn:hover{
background-color: black;
color: white;
}
爪哇腳本：
let cart = document.querySelector('.cart')
let exiticon = document.querySelector('.exiticon')
let cartbody = document.querySelector('.cartbody')
let productlist = document.querySelector('.itemscontainer')
let atcbtns = document.querySelector('.atcbtn')
let cartitem = document.getElementsByClassName('cartitem')
let cartitems = document.querySelector('.cartitems')
let removebtn = document.getElementsByClassName('removecartbtn')
let CartInput = document.getElementsByClassName('CartInput')
FetchProductsData()
function FetchProductsData(){
fetch('ProductsData.json')
.then(response => response.json())
.then(data => {
data.forEach(Product => {
productlist.innerHTML = `<div ><img src="./md-salman-tWOz2_EK5EQ-unsplash.jpg" alt="如何將輸入值保存到 DOM 并且在每個函式之后都不重置它們" ><div ><h2 >${Product.name}</h2><h2 >$${Product.price}</h2></div><div ><button >Add To Cart</button></div></div>`
});
})
.catch(error => {
alert('user live server or local server')
})
}
productlist.addEventListener('click', AddToCart)
function AddToCart(e){
if(e.target.classList.contains('atcbtn')){
console.log('User Clicked a Button')
let Product = e.target.parentElement.parentElement.querySelector('.topitemcontainer')
let ProductImg = Product.querySelector('.itemimg')
let ProductName =Product.querySelector('.itemname').innerText
let ProductPrice = Product.querySelector('.itemprice').innerText
//HERE IS THE ISSUE, INPUT VALUE RESETS
cartitems.innerHTML = `<div ><img src="./md-salman-tWOz2_EK5EQ-unsplash.jpg" alt="如何將輸入值保存到 DOM 并且在每個函式之后都不重置它們" ><h1 >${ProductName}</h1><h2 >${ProductPrice}</h2><input type="number" value="1" ><button >Remove</button></div>`
console.log
for(let i = 0; i < CartInput.length; i ){
console.log(CartInput[i].value)
CartInput[i].addEventListener('change', GetCartInputs)
}
console.log('item added!')
GetTotalPrice()
}
for(let i = 0; i < removebtn.length; i ){
removebtn[i].addEventListener('click', removeItem)
}
}
function GetCartInputs(e){
let CartInput = document.querySelector('.CartInput')
let NewCartInput = e.target
console.log(CartInput)
console.log(NewCartInput)
//MAKE SURE THE USER PUTS IN A VALID VALUE
if(isNaN(NewCartInput.value) || NewCartInput.value <= 0){
NewCartInput.value = 1
}
GetTotalPrice()
}
function GetTotalPrice(){
let total = 0
let TotalPrice = document.querySelector('.totalcartprice')
let PriceFields = document.getElementsByClassName('cartitemprice')
let Inputs = document.getElementsByClassName('CartInput')
// console.log(Inputs)
for(let i = 0; i < PriceFields.length; i ){
// console.log(PriceFields.length)
let AllPrices = Number(PriceFields[i].innerText.replace('$', ''))
let AllInputs = Inputs[i].value
total = AllPrices * AllInputs
TotalPrice.innerText = ('$' total.toFixed(2))
}
}
function removeItem(e){
let TotalPrice = document.querySelector('.totalcartprice')
del_btn = e.target
del_btn_parent = del_btn.parentElement
del_btn_parent.remove()
if(removebtn.length === 0){
TotalPrice.innerHTML = '$' 0
}
GetTotalPrice()
}
帶有資料的 JSON 檔案
[
{
"name": "Shoes",
"category": 12,
"price": 12.99,
"image": 12
},
{
"name": "T shirt",
"category": 12,
"price": 7.99,
"image": 12
},
{
"name": "Necklace",
"category": 12,
"price": 2.99,
"image": 12
},
{
"name": "Pants",
"category": 12,
"price": 4.99,
"image": 12
},
{
"name": "Hat",
"category": 12,
"price": 12,
"image": 12
},
{
"name": "Socks",
"category": 12,
"price": 12,
"image": 12
},
{
"name": "Glasses",
"category": 12,
"price": 12,
"image": 12
},
{
"name": "Ring",
"category": 12,
"price": 12,
"image": 12
}
]
uj5u.com熱心網友回復：
使用cartItems.append(yourItem)或cartItems.prepend(yourItem)代替.innerHTML
innerHTML 清除了以前的專案......所以你正在替換而不是持久化
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/363925.html
標籤：javascript