Hey there, I am praying to the Stackoverflow gods right now. I have been nosing around the internet for over a week trying to grapple a slight understanding for js… and it has me beat. I am making a website for my girlfriends clothing resale company, and am now in the proccess of making a saved shopping cart(seemed easy) but i now find myself without resource, recycling the same links already highlighted in purple.
some problem context, i have three pages:
first is the posting/listing
second is my js storage
third is my cart(or any extra pages that will display ‘selected and incart’ items)…
bare with me here…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>AlexWeb</title>
<link rel="stylesheet" href="(list_one)style.css" />
</head>
<body>
<nav>
<div class="logo">AllyRox</div>
<div class="nav-items">
<ul><li><a href="index.html">Home</a></li></ul>
<ul><li><a href="/">LuvLush</a></li></ul>
<ul><li><a href="/">About</a></li></ul>
<ul><li><a href="/">Contact Us</a></li></ul>
</div>
<div class="nav-shopping">
<ul><li><button onclick="window.location.href='cart.html';"><p>In Cart</p></button></li></ul>
<div class="list-container"></div>
<div class="fa"></i>
<span class='badge badge-warning' id='lblCartCount'></span>
</div>
</nav>
<scipt src="storage.js">
<section class="list" data-name="girlboss" data-price="5">
<div class="title">
<div class="title-box">
<h1 class="product-name" id="name">Girl Boss</h1>
</div>
</div>
</div>
<div class="listing">
<div class="container-form">
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img class="img" value(src)="1" id="1" src="images/1.JPG" alt="img1">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img class="img" src="images/2.JPG" alt="img2">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img class="img" src="images/3.JPG" alt="img3">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div class="">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<h2>sleak flexible bootcut black powerpants</h2>
<div class="inputbox">
<h5 post="weight" id="weight" value="7.00">7.00 : Under - 16 oz</h5>
</div>
<div class="column-bottom">
<div class="add-button">
<form class="add-button" method="post">
<p><input type="submit" value="Add to cart" class="btn"></p></form>
<div class="buy-button" action="checkout.html">
<span class="price" post="price" id="price" value="60">$60</span>
<button type="button" value="save" onclick="window.location.href='cart.html'";>BuyMe</button onclick="window.localStorage.getItem('img','price','weight')">
</section>
</scipt>
<script src="list-one.js" asnyc></script>
</body>
—–>followed by my storage<——–
$( window ).load(function() {
saveItem(); postInfo(); Counter(); setItem(); setCounter();
removeItem(); clearAll();
function saveItem() {
var name = $("#post").val();
var data = $("#value").val();
localStorage.setItem(post, value);
let post=postInfo();
}
function postInfo();
post.addEventListener('click').addcart;{
if (CheckBrowser(post, weight)) {
var key = "name"; document.getElementById('name');
var list = "<tr><th>name</th></tr>n";
var i = 1;
var key = "img"; document.getElementById('img').value(1);
var list = "<tr><th>img</th><th>1</th></tr>n";
var i = 1;
var key = "price"; document.getElementById('Price').value('price');
var list = "<tr><th>img</th><th>1</th></tr>n";
var i = 1;
function Counter(); //Add weight to tally using weight shown in HTML listing.
weight.addEventListener('click').addCounter;{
clicks += 1;
document.getElementById("weight").innerHTML = 'click';
}
JSON.parse(window.localStorage.getItem(post))
function setItem()
post.getElementById(post).setItem;
if (CheckBrowser(post, weight));
var key = "name"; document.getElementById('name');
var list = "<tr><th>name</th></tr>n";
var i = 1;
var key = "img"; document.getElementById('img').value(1);
var list = "<tr><th>img</th><th>1</th></tr>n";
var i = 1;
var key = "Price"; document.getElementById('Price').value('price');
var list = "<tr><th>img</th><th>1</th></tr>n";
var i = 1;
function setCounter() //Set weight 'from' tally using weight shown in HTML listing.
weight.setCounter(weight).setCounter;{
document.getElementById("weight").innerHTML = 'click';
}
function removeItem()
{
var name=document.forms.ShoppingList.name.value;
document.forms.ShoppingList.data.value=localStorage.removeItem(name);
doShowAll();
}
function clearAll() {
localStorage.clear();
doShowAll();
}
//Change an existing key-value in HTML5 storage.
function ModifyItem() {
var name1 = document.forms.ShoppingList.name.value;
var data1 = document.forms.ShoppingList.data.value;
//check if name1 is already exists
//Check if key exists.
if (localStorage.getItem(name1) !=null)
{
//update
localStorage.setItem(name1,data1);
document.forms.ShoppingList.data.value = localStorage.getItem(name1);
}
doShowAll();
}
//For a more advanced feature, you can set a cap on max items in the cart.
for (i = 0; i <= localStorage.length-1; i++) {
key = localStorage.key(i);
localStorage.myProperty="myValue";
list += "<tr><td>" + key + "</td>n<td>"
+ localStorage.getItem(key) + "</td></tr>n";
}
//If no item exists in the cart.
if (list == "<tr><th>Post</th><th>Value</th></tr>n") {
list += "<tr><td><i>empty</i></td>n<td><i>empty</i></td></tr>n";
}
//Bind the data to HTML table.
//You can use jQuery, too.
} else {
alert('Cannot save shopping list as your browser does not support HTML 5');
}
}});
——–>and finally, the display.. i am so sorry..<———
<!DOCTYPE html>
<html lang="en">
<head>
<title>Whats-Crackin</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit">
<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="style.css, Storagestyle.js">
<script type="text/javascript" src="storage.js"></script>
<document class="getElementById"><img src="" alt=""></document>
<link rel="stylesheet" href="cart.css", />
</head>
<body>
<nav>
<div class="logo">AllyRox</div>
<div class="nav-items">
<ul><li><a href="index.html">Home</a></li></ul>
<ul><li><a href="/">LuvLush</a></li></ul>
<ul><li><a href="/">About</a></li></ul>
<ul><li><a href="/">Contact Us</a></li></ul>
</div>
</nav>
<section class="list">
<div action="cart.html" class="container">
<div onload="javascript:postInfo()" onload="javascript:Counter()">
<script>
JSON.parse(window.localStorage.getItem(post))
function setItem()
post.getElementById(post).setItem;
if (CheckBrowser(post, weight));
</script>
</div>
</div>
<div class="emptCart-btn">
<ul><li>
<input type="submit" name="delete" id="empty-cart" class="btn" value="Empty Cart" />
</li></ul>
</div>
<div class="contShop-btn">
<ul><li>
<a href="index.html" class="btn">Continue Shopping</a>
</li></ul>
</div>
<div class="checkout-btn">
<ul><li>
<a href="checkout.html" class="btn">Go To Checkout</a>
</li></ul>
</div>
</ul>
</div>
</div>
</section>
—> if im not just a sad port belly pig, like princess laya your my only hope, and like dorthy clicking my red slippers i just want to follow the yellow brick road. this is my first project, and hopefully smooth sailing after someone helps me here. thank you, ill be here… huddled in the corner.