javascript 如何在重新加载页面后保持按钮禁用？

qybjjes1 于 2023-05-12 发布在 Java

关注(0)|答案(2)|浏览(70)

如何在重新加载页面时禁用单击的按钮？默认情况下是不禁用的，但在10点击它应该去禁用，然后保持禁用后重新加载页面。它是一个数组，其中的产品库存为10。当库存不足时，应禁用该按钮。先谢谢你了！

const wrapper = document.querySelector('.grid')
let lager = 10
let productsArray= []
let datavar = ''

async function getProducts(){
  try{
    const baseURL = 'https://webstore-22fa4-default-rtdb.europe-west1.firebasedatabase.app/'
    const url = baseURL + 'Products.json'
    const response = await fetch(url)
    let data = await response.json()
    console.log(data)
    productsArray.push(data)
    datavar = Object.keys(data)
    console.log(datavar)
    console.log(productsArray)
    
    
  }catch(error){
    console.log(error)
  }
  

  }

getProducts()

let cartNr = document.getElementById('cartNr')
const lang1 = document.querySelector('.lang1')
cartNr = 1

let products = [
    {
        id: 0,
        namn: 'Sneaker1',
        img: '//shelta.se/pub_images/original/DV1129-300_1.jpg?timestamp=1677759773',
        pris: 1500,
        lager: 10,
        inCart: 0
    },
    {
        id: 1,
        namn: 'Sneaker2',
        img: 'https://shelta.se/pub_images/original/AH6789-006_1.jpg',
        pris: 1500,
        lager: 10,
        inCart: 0
    },
    {
        id: 2,
        namn: 'Sneaker3',
        img: 'https://shelta.se/pub_images/original/DV1129-001_1.jpg?timestamp=1673044814',
        pris: 1500,
        lager: 10,
        inCart: 0
    },
    {
        id: 3,
        namn: 'Sneaker4',
        img: 'https://shelta.se/pub_images/original/AH6789-001_1.jpg?timestamp=1609192138',
        pris: 1500,
        lager: 10,
        inCart: 0
    },
    {
        id: 4,
        namn: 'Sneaker5',
        img: 'https://shelta.se/pub_images/original/DM2361-100_0.jpg?timestamp=1628091117',
        pris: 1500,
        lager: 10,
        inCart: 0
    }
]


const euro = document.querySelectorAll('.euro')

for(let i = 0; i < euro.length; i++ ){
    
    euro[i].addEventListener('click', (e) => {
        e.preventDefault()
        
        cartNumbers(products[i])
        totalCost(products[i])
       
         if(products[i].inCart > 9 || products[i].lager < 1){
           const disabled =  euro[i].disabled = true
           localStorage.setItem('disabled', disabled )
           let newDisabled= localStorage.getItem('disabled')
           newDisabled = JSON.parse(newDisabled)
          
           
            if(newDisabled === true){
            
             euro[i].disabled = true
            }
            
            
            
            
            

            
         }  
         
         
    })
}

         

  function onLoadCartNumbers(){
    let productNumbers = localStorage.getItem('cartNumbers')
    if(productNumbers){
        lang1.innerHTML = `<div id="cartNr">${cartNr = productNumbers}</div>`
    }

}

  function cartNumbers(product){
    console.log('the product clicked is', product)
    let productNumbers = localStorage.getItem('cartNumbers')
    productNumbers = parseInt(productNumbers)
    if(productNumbers){
        localStorage.setItem('cartNumbers', productNumbers + 1)
        lang1.innerHTML = `<div id="cartNr">${cartNr = productNumbers +1}</div>`
    }
    else {
        localStorage.setItem('cartNumbers', 1 )
        lang1.innerHTML = `<div id="cartNr">${cartNr = 1}</div>`
    }
   
    setItems(product)
    
  }

  
  

  function setItems(product){
    let cartItems = localStorage.getItem('productsInCart')
    cartItems = JSON.parse(cartItems)
    console.log(cartItems) //funkar
    if(cartItems != null){
        if(cartItems[product.id] == undefined){
            cartItems = {
                ...cartItems,
                [product.id]: product
            }
            console.log(cartItems)
        }else {
        cartItems[product.id].inCart += 1
        
        cartItems[product.id].lager = 10 - cartItems[product.id].inCart
        //product.lager--
        product.inCart++
        
        console.log(cartItems) //funkar
        
        }
    }
    else{
        product.inCart = 1
        product.lager = 9
        cartItems = {
            [product.id]: product
    }
    console.log(cartItems)//funkar
  
    }
    
    localStorage.setItem('productsInCart',JSON.stringify(cartItems))
    console.log(localStorage.getItem('productsInCart'))
}

  function totalCost(product){
    let cartCost = localStorage.getItem('totalCost')
    if(cartCost != null){
        cartCost = parseInt(cartCost)
        localStorage.setItem('totalCost', cartCost + product.pris)
    }
    else{
        localStorage.setItem('totalCost', product.pris)
    }
    
  }

  async function patchPost(obj){
    const baseURL = `https://webstore-22fa4-default-rtdb.europe-west1.firebasedatabase.app/`
    const url = baseURL + `Products.json`
        const init = {
            method: 'PUT',
            body: JSON.stringify(obj),
            headers: {
                "Content-type": "application/json; charset=UTF-8",
            }
        };
    
        const response = await fetch(url, init)
        const data = await response.json()
        console.log(data)
        
    }
     let obj = Object.values(products) 
    patchPost(obj)
    console.log(obj)
    localStorage.setItem('obj', obj)

  onLoadCartNumbers()

<div class="grid"  id="container">
      <div class="div-container">
                <div class="image"><img class="skor-img" src="https://shelta.se/pub_images/original/DV1129-300_1.jpg?timestamp=1677759773" alt=""></div>
                <div class="beskrivning"><strong class="text">Sneaker1</strong><br>
                    <br><p class="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quas quasi praesentium voluptates minima deleniti enim sint quidem expedita sed ut officiis hic dolore dolor quaerat atque earum tenetur necessitatibus, maiores odit illo molestias voluptatibus adipisci quos? Vero necessitatibus tempora inventore, accusamus illo, maiores quisquam quo odit nesciunt qui nisi hic est non aliquid ex numquam earum aperiam? Recusandae excepturi eligendi nemo magni praesentium assumenda, placeat rem numquam illo provident earum officia eveniet tempora commodi laborum molestias animi expedita nihil sint explicabo quos modi at. Odio vel a voluptas explicabo pariatur.</p></div>
                <div class="pris"><p class="lager"></p>  <button class="euro">Buy: 1500kr</button></div>
            </div>
            <div class="div-container">
                <div class="image"><img class="skor-img" src="https://shelta.se/pub_images/original/AH6789-006_1.jpg" alt=""></div>
                <div class="beskrivning"><strong class="text">Sneaker2</strong><br>
                    <br><p class="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quas quasi praesentium voluptates minima deleniti enim sint quidem expedita sed ut officiis hic dolore dolor quaerat atque earum tenetur necessitatibus, maiores odit illo molestias voluptatibus adipisci quos? Vero necessitatibus tempora inventore, accusamus illo, maiores quisquam quo odit nesciunt qui nisi hic est non aliquid ex numquam earum aperiam? Recusandae excepturi eligendi nemo magni praesentium assumenda, placeat rem numquam illo provident earum officia eveniet tempora commodi laborum molestias animi expedita nihil sint explicabo quos modi at. Odio vel a voluptas explicabo pariatur.</p></div>
                <div class="pris"><p class="lager"></p> <button class="euro">Buy: 1500kr</button></div>
            </div>
            <div class="div-container">
                <div class="image"><img class="skor-img" src="https://shelta.se/pub_images/original/DV1129-001_1.jpg?timestamp=1673044814" alt=""></div>
                <div class="beskrivning"><strong class="text">Sneaker3</strong><br>
                    <br><p class="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quas quasi praesentium voluptates minima deleniti enim sint quidem expedita sed ut officiis hic dolore dolor quaerat atque earum tenetur necessitatibus, maiores odit illo molestias voluptatibus adipisci quos? Vero necessitatibus tempora inventore, accusamus illo, maiores quisquam quo odit nesciunt qui nisi hic est non aliquid ex numquam earum aperiam? Recusandae excepturi eligendi nemo magni praesentium assumenda, placeat rem numquam illo provident earum officia eveniet tempora commodi laborum molestias animi expedita nihil sint explicabo quos modi at. Odio vel a voluptas explicabo pariatur.</p></div>
                <div class="pris"><p class="lager"></p> <button class="euro">Buy: 1500kr</button></div>
            </div>
            <div class="div-container">
                <div class="image"><img class="skor-img" src="https://shelta.se/pub_images/original/AH6789-001_1.jpg?timestamp=1609192138" alt=""></div>
                <div class="beskrivning"><strong class="text">Sneaker4</strong><br>
                    <br><p class="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quas quasi praesentium voluptates minima deleniti enim sint quidem expedita sed ut officiis hic dolore dolor quaerat atque earum tenetur necessitatibus, maiores odit illo molestias voluptatibus adipisci quos? Vero necessitatibus tempora inventore, accusamus illo, maiores quisquam quo odit nesciunt qui nisi hic est non aliquid ex numquam earum aperiam? Recusandae excepturi eligendi nemo magni praesentium assumenda, placeat rem numquam illo provident earum officia eveniet tempora commodi laborum molestias animi expedita nihil sint explicabo quos modi at. Odio vel a voluptas explicabo pariatur.</p></div>
                <div class="pris"><p class="lager"></p>  <button class="euro">Buy: 1500kr</button></div>
            </div>
            <div class="div-container">
                <div class="image"><img class="skor-img" src="https://shelta.se/pub_images/original/DM2361-100_0.jpg?timestamp=1628091117" alt=""></div>
                <div class="beskrivning"><strong class="text">Sneaker5</strong><br>
                    <br><p class="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quas quasi praesentium voluptates minima deleniti enim sint quidem expedita sed ut officiis hic dolore dolor quaerat atque earum tenetur necessitatibus, maiores odit illo molestias voluptatibus adipisci quos? Vero necessitatibus tempora inventore, accusamus illo, maiores quisquam quo odit nesciunt qui nisi hic est non aliquid ex numquam earum aperiam? Recusandae excepturi eligendi nemo magni praesentium assumenda, placeat rem numquam illo provident earum officia eveniet tempora commodi laborum molestias animi expedita nihil sint explicabo quos modi at. Odio vel a voluptas explicabo pariatur.</p></div>
                <div class="pris"><p class="lager"></p>  <button class="euro">Buy: 1500kr</button></div>
            </div>
            
    </div>

JavaScript

来源：https://stackoverflow.com/questions/76228102/how-to-keep-the-button-disabled-even-after-reload-the-page

2条答案

按热度按时间

vuktfyat1#

在运行for循环之前，似乎需要将products[i].incart的值设置为用户购物车中已有的值。
你的if语句中是否也有一个“and”逻辑运算符？products[i].inCart === 10 && products[i].lager === 0
这句话可能更安全：
products[i].inCart > 9 || products[i].lager < 1

赞(0）回复(0）举报 2023-05-12

xoefb8l82#

为了存储每个项目的“disabled”值，我将其设置为一个数组。
也就是说，第一次，它将包含所有项目的“false”。
然后在随后的情况下，它将使用localStorage值进行更新。
所以我修改了这部分代码：

const euro = document.querySelectorAll('.euro')
let disabled = [false, false, false, false, false];
let newDisabled = disabled;
let newDisabled1 = []; 
for(let i = 0; i < euro.length; i++ ){
        
        euro[i].addEventListener('click', (e) => {
            e.preventDefault()
            
            cartNumbers(products[i])
            totalCost(products[i])
           
             if(products[i].inCart > 9 || products[i].lager < 1){
               disabled[i] = true;
               localStorage.setItem('disabled', JSON.stringify(disabled) )//Uses JSON.stringify to store disabled as an JSON array. Otherwise it will result in a string.
                }
            newDisabled = localStorage.getItem('disabled')
            if(newDisabled){//this is to check whether newDisabled is null or not (null in case of absence of disabled in localStorage)
            newDisabled1[i]= JSON.parse(newDisabled)[i];
            if(newDisabled1[i] === true){
                 euro[i].disabled = true
            }
            }
        })
        //following section is to disable the button depending on the local storage value on page load
        newDisabled = localStorage.getItem('disabled')
        if(newDisabled){//this is to check whether newDisabled is null or not (null in case of absence of disabled in localStorage)
            newDisabled1[i]= JSON.parse(newDisabled)[i];
               
            if(newDisabled1[i] === true){
                 euro[i].disabled = true
            }
            }
    }

我在代码上添加了注解作为解释。
所以你的完整代码变成：

const wrapper = document.querySelector('.grid')
    let lager = 10
    let productsArray= []
    let datavar = ''

    async function getProducts(){
      try{
        const baseURL = 'https://webstore-22fa4-default-rtdb.europe-west1.firebasedatabase.app/'
        const url = baseURL + 'Products.json'
        const response = await fetch(url)
        let data = await response.json()
        console.log(data)
        productsArray.push(data)
        datavar = Object.keys(data)
        console.log(datavar)
        console.log(productsArray)
        
        
      }catch(error){
        console.log(error)
      }
      

      }

    getProducts()

    let cartNr = document.getElementById('cartNr')
    const lang1 = document.querySelector('.lang1')
    cartNr = 1

    let products = [
        {
            id: 0,
            namn: 'Sneaker1',
            img: '//shelta.se/pub_images/original/DV1129-300_1.jpg?timestamp=1677759773',
            pris: 1500,
            lager: 10,
            inCart: 0
        },
        {
            id: 1,
            namn: 'Sneaker2',
            img: 'https://shelta.se/pub_images/original/AH6789-006_1.jpg',
            pris: 1500,
            lager: 10,
            inCart: 0
        },
        {
            id: 2,
            namn: 'Sneaker3',
            img: 'https://shelta.se/pub_images/original/DV1129-001_1.jpg?timestamp=1673044814',
            pris: 1500,
            lager: 10,
            inCart: 0
        },
        {
            id: 3,
            namn: 'Sneaker4',
            img: 'https://shelta.se/pub_images/original/AH6789-001_1.jpg?timestamp=1609192138',
            pris: 1500,
            lager: 10,
            inCart: 0
        },
        {
            id: 4,
            namn: 'Sneaker5',
            img: 'https://shelta.se/pub_images/original/DM2361-100_0.jpg?timestamp=1628091117',
            pris: 1500,
            lager: 10,
            inCart: 0
        }
    ]


    const euro = document.querySelectorAll('.euro')
    let disabled = [false, false, false, false, false];
    let newDisabled = disabled;
    let newDisabled1 = []; 
    for(let i = 0; i < euro.length; i++ ){
        
        euro[i].addEventListener('click', (e) => {
            e.preventDefault()
            
            cartNumbers(products[i])
            totalCost(products[i])
           
             if(products[i].inCart > 9 || products[i].lager < 1){
               disabled[i] = true;
               localStorage.setItem('disabled', JSON.stringify(disabled) )//Uses JSON.stringify to store disabled as an JSON array. Otherwise it will result in a string.
                }
            newDisabled = localStorage.getItem('disabled')
            if(newDisabled){//this is to check whether newDisabled is null or not (null in case of absence of disabled in localStorage)
            newDisabled1[i]= JSON.parse(newDisabled)[i];
            if(newDisabled1[i] === true){
                 euro[i].disabled = true
            }
            }
        })
        //following section is to disable the button depending on the local storage value on page load
        newDisabled = localStorage.getItem('disabled')
        if(newDisabled){//this is to check whether newDisabled is null or not (null in case of absence of disabled in localStorage)
            newDisabled1[i]= JSON.parse(newDisabled)[i];
               
            if(newDisabled1[i] === true){
                 euro[i].disabled = true
            }
            }
    }

             

      function onLoadCartNumbers(){
        let productNumbers = localStorage.getItem('cartNumbers')
        if(productNumbers){
            lang1.innerHTML = `<div id="cartNr">${cartNr = productNumbers}</div>`
        }
    }

      function cartNumbers(product){
        console.log('the product clicked is', product)
        let productNumbers = localStorage.getItem('cartNumbers')
        productNumbers = parseInt(productNumbers)
        if(productNumbers){
            localStorage.setItem('cartNumbers', productNumbers + 1)
            lang1.innerHTML = `<div id="cartNr">${cartNr = productNumbers +1}</div>`
        }
        else {
            localStorage.setItem('cartNumbers', 1 )
            lang1.innerHTML = `<div id="cartNr">${cartNr = 1}</div>`
        }
       
        setItems(product)
        
      }

      
      

      function setItems(product){
        let cartItems = localStorage.getItem('productsInCart')
        cartItems = JSON.parse(cartItems)
        console.log(cartItems) //funkar
        if(cartItems != null){
            if(cartItems[product.id] == undefined){
                cartItems = {
                    ...cartItems,
                    [product.id]: product
                }
                console.log(cartItems)
            }else {
            cartItems[product.id].inCart += 1
            
            cartItems[product.id].lager = 10 - cartItems[product.id].inCart
            //product.lager--
            product.inCart++
            
            console.log(cartItems) //funkar
            
            }
        }
        else{
            product.inCart = 1
            product.lager = 9
            cartItems = {
                [product.id]: product
        }
        console.log(cartItems)//funkar
      
        }
        
        localStorage.setItem('productsInCart',JSON.stringify(cartItems))
        console.log(localStorage.getItem('productsInCart'))
    }

      function totalCost(product){
        let cartCost = localStorage.getItem('totalCost')
        if(cartCost != null){
            cartCost = parseInt(cartCost)
            localStorage.setItem('totalCost', cartCost + product.pris)
        }
        else{
            localStorage.setItem('totalCost', product.pris)
        }
        
      }

      async function patchPost(obj){
        const baseURL = `https://webstore-22fa4-default-rtdb.europe-west1.firebasedatabase.app/`
        const url = baseURL + `Products.json`
            const init = {
                method: 'PUT',
                body: JSON.stringify(obj),
                headers: {
                    "Content-type": "application/json; charset=UTF-8",
                }
            };
        
            const response = await fetch(url, init)
            const data = await response.json()
            console.log(data)
            
        }
         let obj = Object.values(products) 
        patchPost(obj)
        console.log(obj)
        localStorage.setItem('obj', obj)

      onLoadCartNumbers()

<div class="grid"  id="container">
          <div class="div-container">
                    <div class="image"><img class="skor-img" src="https://shelta.se/pub_images/original/DV1129-300_1.jpg?timestamp=1677759773" alt=""></div>
                    <div class="beskrivning"><strong class="text">Sneaker1</strong><br>
                        <br><p class="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quas quasi praesentium voluptates minima deleniti enim sint quidem expedita sed ut officiis hic dolore dolor quaerat atque earum tenetur necessitatibus, maiores odit illo molestias voluptatibus adipisci quos? Vero necessitatibus tempora inventore, accusamus illo, maiores quisquam quo odit nesciunt qui nisi hic est non aliquid ex numquam earum aperiam? Recusandae excepturi eligendi nemo magni praesentium assumenda, placeat rem numquam illo provident earum officia eveniet tempora commodi laborum molestias animi expedita nihil sint explicabo quos modi at. Odio vel a voluptas explicabo pariatur.</p></div>
                    <div class="pris"><p class="lager"></p>  <button class="euro">Buy: 1500kr</button></div>
                </div>
                <div class="div-container">
                    <div class="image"><img class="skor-img" src="https://shelta.se/pub_images/original/AH6789-006_1.jpg" alt=""></div>
                    <div class="beskrivning"><strong class="text">Sneaker2</strong><br>
                        <br><p class="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quas quasi praesentium voluptates minima deleniti enim sint quidem expedita sed ut officiis hic dolore dolor quaerat atque earum tenetur necessitatibus, maiores odit illo molestias voluptatibus adipisci quos? Vero necessitatibus tempora inventore, accusamus illo, maiores quisquam quo odit nesciunt qui nisi hic est non aliquid ex numquam earum aperiam? Recusandae excepturi eligendi nemo magni praesentium assumenda, placeat rem numquam illo provident earum officia eveniet tempora commodi laborum molestias animi expedita nihil sint explicabo quos modi at. Odio vel a voluptas explicabo pariatur.</p></div>
                    <div class="pris"><p class="lager"></p> <button class="euro">Buy: 1500kr</button></div>
                </div>
                <div class="div-container">
                    <div class="image"><img class="skor-img" src="https://shelta.se/pub_images/original/DV1129-001_1.jpg?timestamp=1673044814" alt=""></div>
                    <div class="beskrivning"><strong class="text">Sneaker3</strong><br>
                        <br><p class="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quas quasi praesentium voluptates minima deleniti enim sint quidem expedita sed ut officiis hic dolore dolor quaerat atque earum tenetur necessitatibus, maiores odit illo molestias voluptatibus adipisci quos? Vero necessitatibus tempora inventore, accusamus illo, maiores quisquam quo odit nesciunt qui nisi hic est non aliquid ex numquam earum aperiam? Recusandae excepturi eligendi nemo magni praesentium assumenda, placeat rem numquam illo provident earum officia eveniet tempora commodi laborum molestias animi expedita nihil sint explicabo quos modi at. Odio vel a voluptas explicabo pariatur.</p></div>
                    <div class="pris"><p class="lager"></p> <button class="euro">Buy: 1500kr</button></div>
                </div>
                <div class="div-container">
                    <div class="image"><img class="skor-img" src="https://shelta.se/pub_images/original/AH6789-001_1.jpg?timestamp=1609192138" alt=""></div>
                    <div class="beskrivning"><strong class="text">Sneaker4</strong><br>
                        <br><p class="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quas quasi praesentium voluptates minima deleniti enim sint quidem expedita sed ut officiis hic dolore dolor quaerat atque earum tenetur necessitatibus, maiores odit illo molestias voluptatibus adipisci quos? Vero necessitatibus tempora inventore, accusamus illo, maiores quisquam quo odit nesciunt qui nisi hic est non aliquid ex numquam earum aperiam? Recusandae excepturi eligendi nemo magni praesentium assumenda, placeat rem numquam illo provident earum officia eveniet tempora commodi laborum molestias animi expedita nihil sint explicabo quos modi at. Odio vel a voluptas explicabo pariatur.</p></div>
                    <div class="pris"><p class="lager"></p>  <button class="euro">Buy: 1500kr</button></div>
                </div>
                <div class="div-container">
                    <div class="image"><img class="skor-img" src="https://shelta.se/pub_images/original/DM2361-100_0.jpg?timestamp=1628091117" alt=""></div>
                    <div class="beskrivning"><strong class="text">Sneaker5</strong><br>
                        <br><p class="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quas quasi praesentium voluptates minima deleniti enim sint quidem expedita sed ut officiis hic dolore dolor quaerat atque earum tenetur necessitatibus, maiores odit illo molestias voluptatibus adipisci quos? Vero necessitatibus tempora inventore, accusamus illo, maiores quisquam quo odit nesciunt qui nisi hic est non aliquid ex numquam earum aperiam? Recusandae excepturi eligendi nemo magni praesentium assumenda, placeat rem numquam illo provident earum officia eveniet tempora commodi laborum molestias animi expedita nihil sint explicabo quos modi at. Odio vel a voluptas explicabo pariatur.</p></div>
                    <div class="pris"><p class="lager"></p>  <button class="euro">Buy: 1500kr</button></div>
                </div>
                
        </div>
<div class="lang1"></div>

localStorage无法在snippet上工作，请在本地尝试。
关于我为什么使用JSON.stringify的更多解释，请参见please see this question and its answers。

赞(0）回复(0）举报 2023-05-12

我来回答

javascript 如何在重新加载页面后保持按钮禁用？

2条答案

相关问题

热门标签

最新问答