Question

我希望将每个网页上的“添加到购物车”按钮链接到购物车，但我不知道该怎么做。我必须为任务做这件事，需要在星期五交。

有人可以帮忙吗？

<!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

由于没有具体问题，很难知道您在问什么，但是也许您正在寻找类似的东西？

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>

请注意，最佳做法是使用eventListener，并且在HTML中不包含函数调用。

希望有帮助！

将我网站上的添加到购物车按钮链接到购物车

1 个答案: