Linking Add to cart button on my website to the cart

Question

I am looking to link my add to cart button on each of my web pages to the cart but I dont know how to do this. I am having to do this for an assignment and need to hand this in Friday.

Could someone please help?

<!doctype html>
<html lang="en-US">
<head>
<title>HTML5 Local Storage Project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink- 
to-fit=no">
<meta name="rating" content="General">
<meta name="expires" content="never">
<meta name="language" content="English, EN">
<meta name="description" content="Shopping cart project with HTML5 and 
JavaScript">
<meta name="keywords" content="HTML5,CSS,JavaScript, html5 session storage, 
html5 local storage">
<script src="Storage.js"></script>
<link rel="stylesheet" href="StorageStyle.css">
</head>
<form name="ShoppingList">
<fieldset>
    <legend>Shopping cart</legend>
    <label>Item: <input type="text" name="name"></label>
    <label>Quantity: <input type="text" name="data"></label>

    <input type="button" value="Save"   onclick="SaveItem()">
    <input type="button" value="Update" onclick="ModifyItem()">
    <input type="button" value="Delete" onclick="RemoveItem()">
</fieldset>
<div id="items_table">
    <h2>Shopping List</h2>
    <table id="list"></table>
    <label><input type="button" value="Clear" onclick="ClearAll()">
    * Delete all items</label>
</div>
</form>



<div class= "paris">
 <img src ="../IMAGES/paris.jpg" alt = "sale offer" width ="315" height 
 ="200">
<h3>Flights to Charles de gaulle Now Only £95</h3>
  <button>Add to Cart</button>
</div>
</div>

Answer 1

It's hard to know what you're asking since there's no specific question, but maybe you're looking for something like this?

 const saveButton = document.querySelector('input[value="Save"]'); saveButton.addEventListener('click', saveItem); function saveItem() { const item = document.querySelector('input[name="name"]'); const qty = document.querySelector('input[name="data"]'); const list = document.querySelector('#list'); const tr = document.createElement('tr'); tr.textContent = `${item.value} ${qty.value}`; list.insertAdjacentElement('beforeEnd', tr); }

 <!doctype html> <html lang="en-US"> <head> <title>HTML5 Local Storage Project</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink- to-fit=no"> <meta name="rating" content="General"> <meta name="expires" content="never"> <meta name="language" content="English, EN"> <meta name="description" content="Shopping cart project with HTML5 and JavaScript"> <meta name="keywords" content="HTML5,CSS,JavaScript, html5 session storage, html5 local storage"> <meta name="author" content="dcwebmakers.com"> <script src="Storage.js"></script> <link rel="stylesheet" href="StorageStyle.css"> </head> <form name="ShoppingList"> <fieldset> <legend>Shopping cart</legend> <label>Item: <input type="text" name="name"></label> <label>Quantity: <input type="text" name="data"></label> <input type="button" value="Save" > <input type="button" value="Update" onclick="ModifyItem()"> <input type="button" value="Delete" onclick="RemoveItem()"> </fieldset> <div id="items_table"> <h2>Shopping List</h2> <table id="list"></table> <label><input type="button" value="Clear" onclick="ClearAll()"> * Delete all items</label> </div> </form>

Note it's best practice to use eventListeners and not have function calls in your HTML.

Hope it helps!

Linking Add to cart button on my website to the cart

Question

1 answers

solution1
0 2020-01-25 14:58:37

Linking Add to cart button on my website to the cart

Question

1 answers

solution1 0 2020-01-25 14:58:37

solution1
0 2020-01-25 14:58:37