The product has been taken out of the cart, yet it has not been reinserted into the cart

The product disappears from the cart after clicking on Add to Cart, but it doesn't reappear when clicked again.

//function for adding only one item to cart
document.getElementById('btn1').onclick = function() {
  addItemToCart()
};

function addItemToCart() {
  var x = document.getElementById('itm_img');
  
  document.getElementById('itm1').innerHTML = x.innerHTML;
  document.getElementById('rtm').style.display = "block";
}

// function for removing item from cart
document.getElementById('rtm').onclick = function() {
  removeItemFromCart()
};

function removeItemFromCart() {
  document.getElementById('itemshow').style.display = "none";
}
.all {
  display: flex;
}

.item_container {
  display: flex;
  flex-direction: column;
  background-color: #ffcccc;
  width: 250px;
  border-radius: 6px;
  box-shadow: 10px 10px 30px;
  align-items: center;
  margin: 5%;
}

.itm_img {
  padding: 2%;
}

.img {
  width: 200px;
  border-radius: 5px;
}

.itm_title {
  text-align: center;
}

h3 {
  font-family: 'Roboto', sans-serif;
  margin-bottom: 0%;
}
<head>
  <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=Roboto:wght@500&display=swap" rel="stylesheet">
</head>

<body>
  <div class="all">
    <div class="item_container">
      <div class="itm_img" id="itm_img">
        <img src="https://m.media-amazon.com/images/I/61X1b09mK0L._SL1500_.jpg" alt="img" class="img" id="img">
      </div>
      <div clas="itm_dtl">
        <div class="itm_title" id="itm_title">
          <h3> Milton stainless steel Water Bottle, 1 pc, 950 ml, Silver</h3>
        </div>
        <div class="link">
          <a href="https://www.milton.in/">Visit Milton Store</a>
        </div>
        <hr>
        <div class="price">$19</div>
        <div class="btn">
          <button class="btn1" id="btn1">Add to Cart</button>
        </div>
      </div>
    </div>
    <div class="item_container">
      <div class="itm_img">
        <img src="https://m.media-amazon.com/images/I/61X1b09mK0L._SL1500_.jpg" alt="img" class="img">
      </div>
      <div clas="itm_dtl">
        <div class="itm_title">
          <h3> Milt# # on stainless steel Water Bottle, 1 pc, 950 ml, Silver</h3>

After adding the item to the cart and then removing it using the provided button, trying to add it back by clicking Add to Cart does not work as expected.

Answer №1

Within your function rtm(), you currently utilize display:none to eliminate an item when the remove button is clicked. However, if you wish to re-add the item back to the cart, you must remove the display:none property from the #itemshow element.

Add the following line to your myFunc():

document.getElementById('itemshow').style.display = "block";

It's important to note that this approach does not actually add or remove items from the cart in a strict technical sense, but rather hides and reveals them based on user actions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Explore the extensive JSON link for redirecting

I have an issue with accessing the HATEOS link example on PayPal. My browser is showing a syntax error when I try to access the link. SyntaxError: missing ) after argument list [Break On This Error] alert(links.1.href); (line 32, col 15) The JSON d ...

Is there a way to access fields from an associated model within React components?

Is there a way to access fields from an associated model in React components within Rails? I have a listing model that I'm iterating through in a React component and retrieving all the fields for each record, including the ID of the associated model. ...

What measures can I take to ensure that users cannot tamper with the PayPal code?

I've integrated a "Pay Now" button from Paypal onto my website. However, there is an issue where users can easily alter the payment amount before proceeding. Below is the code PayPal has provided: <form action="https://www.paypal.com/cgi-bin/webs ...

Place an IconButton component next to each Material UI TableRow

I am trying to include an icon next to the material UI table row component. Similar to the hint icon shown in the screenshot below Here is my attempt so far, but it's not functioning as expected: Check out the code on CodeSandbox https://i.stack.i ...

Adjust the position of the element by lifting it slightly

I am looking to adjust the positioning of the number "01 / 04" to match the layout shown in this image: https://i.sstatic.net/3MNA5.png Here is what I have accomplished so far: https://i.sstatic.net/6ayOx.jpg This is how the code structure looks like i ...

Customizing Material UI: Adjusting the visibility of slider thumb upon user interaction and value changes in the slider

In my application, I have implemented a Material UI Slider and I am looking to keep the thumb invisible until the user interacts with it. Once the user changes the slider value, I want the thumb to remain visible at that specific value. By using the CSS pr ...

Hiding Div with JavaScript (Quick and Easy)

Hey there, I'm looking to make regStart and regPage alternate visibility based on a click event. I'm still getting the hang of JavaScript so any simple answers would be appreciated. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/x ...

Creating a counter for a list using CSS

I am attempting to utilize the counter increment feature in CSS for my ordered list, but it doesn't seem to be functioning properly. Here is the desired format I want to achieve: 1. Acknowledgements 1.1 blah, blah .... 1.2 blah, blah .... 1 ...

The error message "prettyPrint is not defined" indicates that the function prettyPrint

I am facing an issue with ReferenceError: prettyPrint is not defined. Can you provide some help? <a class="question helpcenterheading" href="http://www.google.com">How do I reach out to you?</a> <span class="answer">Just a moment...</ ...

Keeping the color of CSS buttons consistent can be achieved by setting specific

Here is my CSS code: .horizontalcssmenu ul{ margin: 0; padding: 0; list-style-type: none; list-style:none; } .horizontalcssmenu ul a:active{ color: #00FFFF; background: #FF0033; text-decoration: none; } /* Styles for top leve ...

Error: The getter callback for the component `RNCSafeAreaProvider` must be a function, but it is currently undefined

After attempting to update my React Native app's dependencies using npm update, chaos ensued. To rectify the situation, I reverted back to the previous package-lock.json, deleted the node_modules folder, and re-ran npm i. Surprisingly, instead of res ...

Retrieving the selected date from JqueryUI Datepicker after form submission

I am currently using an inline datepicker that fills in an input textbox. $("#left-calendar").datepicker({ altField: "#left-date-text" }); The left-date-text is located within a form, and upon submission with a submit button, it sends the data to a p ...

The navigation bar vanishes when a picture is inserted below it

I encountered an unusual issue on my webpage. Everything was going smoothly with my navigation bar, even for mobile phones. However, as soon as I added a photo below the navigation bar, it disappeared... I'd like to keep the navigation bar visible, ...

Click on the image to resize the div accordingly

I have a scenario where I need to achieve the following functionality: Two divs are present, with an image inside the first div. When the image is clicked, the left div should resize, and the content on the right side should expand to show full page cont ...

What is the process for adding the multiple attribute to a select dropdown in a form?

I implemented the selectric plugin for dropdowns on my website. I included the multiple attribute in the select tag, but it doesn't seem to be functioning properly based on what is shown on the index page of the selectric plugin located at: This is t ...

Enhancing jQuery UI Tabs with HoverIntent

I'm currently working on incorporating HoverIntent into my jQuery tabs, but I seem to be facing some issues. Below is the code snippet that I've been using. Any suggestions or tips would be greatly appreciated. Thank you! The code was sourced di ...

Send the Vue component as an argument to the function

Currently, I am in the process of transferring a project to Vue and utilizing Muuri as a layout manager. In my code, I have the following snippet: grid.add(itemElem, { layout: false, active: false }); The variable itemElem used to be an HTML element c ...

Tips for ensuring the footer remains at the bottom of the page

I'm struggling with positioning my footer at the bottom of the page. No matter what I try, it just doesn't look right. Here's the code snippet I've been working with: <div id="footer"> <div class="container"> <div ...

What is the most efficient method for linking the hostname of my website to the file path within my Express.js static file server?

When using vanilla JavaScript in the browser, we can retrieve the hostname using: window.location.hostname However, if we are working with Node.js/Express.js on the server side, how can we achieve the same result? Furthermore, I am looking for a way to ...

Exploring data elements in a Javascript array

Is there a way to use Javascript or jQuery to address the individual employee number, tasks, and sites in the following JSON array? $.each(mySchedule, function(i, obj) { console.log(obj.employees); }); var mySchedule = { "schedule": { "empl ...