如何将数据从一个html页面传递到另一个？
[英]How to pass data from one html page to another?
问题描述
这是洗衣网站的两个html页面，一个称为预订页面，客户可以单击此处以预订要洗涤的衣物数量并支付总金额，另一页面称为摘要，该页面旨在接收预订数据页面（不使用服务器端语言，仅使用JavaScript中的本地存储），但是我根本无法弄清楚。
我尝试使用本地存储，但无法弄清楚。
<div class="summaryContainer">
<div class="summaryNavBar"><p className="summaryTitle">Summary</p>
</div>
<div class="summaryContent">
<p class="total" id="total">Total:</p>
<p class="sum">₦0.00</p>
</div>
<div class="summaryCard">
<div class="summary-card-title">
<div>Item</div>
<div>Quantity</div>
</div>
<div class="summary-card-content">
<div >Shirt(s)</div><div id="
first" class="summary-quantity"><button type="button" id="sub"
class="sub">−</button>
<input type="text" id="1" value="0" class="field" />
<button type="button" id="add" class="add">+</button> </div>
</div>
<div class="summary-card-content">
<div>Trouser(s)</div>
<div class="summary-quantity" id="second">
<button type="button" id="sub" class="sub">−</button>
<input type="text" id="1" value="0" class="field" />
<button type="button" id="add" class="add">+</button>
</div>
</div>
<div class="summary-card-content" id="third">
<div>Suit(s)</div><div class="summary-quantity"><button
type="button" id="sub" class="sub">−</button>
<input type="text" id="1" value="0" class="field" />
<button type="button" id="add" class="add">+</button> </div>
</div>
<p class=" more">..more</p>
</div>
<div class="summaryButton">
<button class="button-left"><span><FontAwesomeIcon
class="buttonLeft" icon="angle-left"/></span>Back</button>
<button class="button-right">Proceed to payment<FontAwesomeIcon
class="buttonRight" icon="angle-right"/></button>
</div>
</div>
</body>
</html>
这是预订页面文件
<div class="bookingContainer">
<div>
<div class="booking-container-title">
<p>Book a laundry service</p>
</div>
</div>
<div class="first-booking-container">
<p>What would you like to do ?</p>
<select>
<option class="middle">Dry Clean</option>
<option class="middle">Wash</option>
<option class="middle">Iron</option>
</select>
<FontAwesomeIcon class="select-icon" icon="chevron-down" />
</div>
<!-- First Value -->
<div class="second-booking-container">
<div>
<div class="second-booking-container-image"><img
src="./img/shirt.png" /></div>
<p class="second-booking-container-icon" name="product"
value="100" id="qnty_1">
Shirt(s)</p>
<select onchange='totalItem()' class="center" id="first">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<FontAwesomeIcon class="select-long-icon" icon="chevron-
down" />
<p class="second-booking-container-text" id='firstVal'
name="price" max="3" min="1">₦100</p>
</div>
<div>
<div class="second-booking-container-image"><img
src="./img/trouser.png" /></div>
<p class="second-booking-container-icon" name="product"
value="100" id="qnty_2">
Trouser(s)</p>
<select onchange='totalItem()' class="center" id="second">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<FontAwesomeIcon class="select-long-icon" icon="chevron-
down" />
<p class="second-booking-container-text" id="secondVal"
name="price" max="3" min="1">₦100</p>
</div>
<div>
<div class="second-booking-container-image"><img
src="./img/skirt.png" /></div>
<p class="second-booking-container-icon" name="product"
value="100" id="qnty_3">
Skirt(s)</p>
<select onchange='totalItem()' class="center" id="third">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<FontAwesomeIcon class="select-long-icon" icon="chevron-
down" />
<p class="second-booking-container-text" id="thirdVal"
name="price" max="3" min="1">₦100</p>
</div>
<div>
<div class="second-booking-container-image"><img
src="./img/blouse.png" /></div>
<p class="second-booking-container-icon" name="product"
value="100" id="qnty_4">
Blouse(s)</p>
<select onchange='totalItem()' class="center" id="fourth">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<FontAwesomeIcon class="select-long-icon" icon="chevron-
down" />
<p class="second-booking-container-text" id="fourthVal"
name="price" max="3" min="1">₦100</p>
</div>
<div>
src="./img/jacket.png" /></div>
<p class="second-booking-container-icon-long" name="product"
value="100" id="qnty_5">Suit/Jacket(s)
</p>
<select onchange='totalItem()' class="center" id="fifth">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<FontAwesomeIcon class="select-long-icon" icon="chevron-
down" />
<p class="second-booking-container-text" id="fifthVal"
name="price" max="3" min="1">₦100</p>
</div>
</div>
<div class="third-booking-container">
<p id="total">Total: <span>₦0.00</span></p>
<button>Set pick up date
<FontAwesomeIcon class="second-container-button-right"
icon="angle-right" /></button>
</div>
</div>
<script src="main.js"></script>
这是JavaScript文件
let first = document.querySelector('#first');
let second = document.querySelector('#second');
let third = document.querySelector('#third');
let fourth = document.querySelector('#fourth');
let fifth = document.querySelector('#fifth');
//invoke this function when the input changes on individual
selected elements
const totalItem = () => {
let firstValue = `${first.options[first.selectedIndex].value}`
let secondValue = `${second.options[second.selectedIndex].value}`
let thirdValue =
`${third.options[third.selectedIndex].value}`
let fourthValue = `${fourth.options[fourth.selectedIndex].value}`
let fifthValue = `${fifth.options[fifth.selectedIndex].value}`
console.table(firstValue, secondValue, thirdValue, fourthValue,
fifthValue)
//call function for each cloths and pass 3 values(the selected
number, the constant(₦100) and where to update)
multiplySelectedwithConstVal(firstValue, firstValNo, firstVal);
multiplySelectedwithConstVal(secondValue, secondValNo,
secondVal);
multiplySelectedwithConstVal(thirdValue, thirdValNo, thirdVal);
multiplySelectedwithConstVal(fourthValue, fourthValNo,
fourthVal);
multiplySelectedwithConstVal(fifthValue, fifthValNo, fifthVal);
//total addition of all values
let selectedValArray = [];
const total = () => {
selectedValArray.push(
parseInt(firstVal.innerHTML.replace("₦", "")),
parseInt(secondVal.innerHTML.replace("₦", "")),
parseInt(thirdVal.innerHTML.replace("₦", "")),
parseInt(fourthVal.innerHTML.replace("₦", "")),
parseInt(fifthVal.innerHTML.replace("₦", ""))
);
return selectedValArray.reduce((accu, currentVal) => accu +
currentVal, 0);
}
finalVal.innerHTML = `Total: <span>₦${total()}</span>`
// console.log(total());
}
//target elements that will be updated and
let firstVal = document.querySelector('#firstVal');
let secondVal = document.querySelector('#secondVal');
let thirdVal = document.querySelector('#thirdVal');
let fourthVal = document.querySelector('#fourthVal');
let fifthVal = document.querySelector('#fifthVal');
let finalVal = document.querySelector('#total');
//convert ₦100 to number for multiplication
//converted the innerhtml to number
let firstValNo = parseInt(firstVal.innerHTML.replace("₦", ""));
let secondValNo = parseInt(secondVal.innerHTML.replace("₦", ""));
let thirdValNo = parseInt(thirdVal.innerHTML.replace("₦", ""));
let fourthValNo = parseInt(fourthVal.innerHTML.replace("₦", ""));
let fifthValNo = parseInt(fifthVal.innerHTML.replace("₦", ""));
//multiply selected value with constant and update
const multiplySelectedwithConstVal = (i, k, update) => {
let result = parseInt(i) * k
return update.innerHTML = `₦${result}`
}
我希望从预订页面获得的价值直接体现在摘要中，加号和减号按钮还应该能够增加或减少衣服的数量，并且还可以更改要支付的总金额。
1 个解决方案
解决方案1
0 已采纳 2019-07-31 04:48:05
在您的初始页（即第1页）中添加此代码
let firstVal = document.querySelector('#firstVal');
let secondVal = document.querySelector('#secondVal');
let thirdVal = document.querySelector('#thirdVal');
let fourthVal = document.querySelector('#fourthVal');
let fifthVal = document.querySelector('#fifthVal');
let finalVal = document.querySelector('#total');
localStorage.setItem("firstVal", firstVal);
localStorage.setItem("secondVal", secondVal);
localStorage.setItem("thirdVal", thirdVal);
localStorage.setItem("fourthVal", fourthVal);
localStorage.setItem("fifthVal", fifthVal);
localStorage.setItem("finalVal", finalVal);
在您要获取值的第二页（即第二页）中添加此代码
let firstVal = localStorage.getItem(('firstVal');
let secondVal = localStorage.getItem(('secondVal');
let thirdVal = localStorage.getItem(('thirdVal');
let fourthVal = localStorage.getItem(('fourthVal');
let fifthVal = localStorage.getItem(('fifthVal');
let finalVal = localStorage.getItem(('finalVal');
console.log(firstVal);
console.log(secondVal);
console.log(thirdVal);
console.log(fourthVal);
console.log(fifthVal);
console.log(finalVal);
您还可以在此处了解与本地存储相关的一些基本知识： https : //developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
以下是预订页面的代码，其中localstorage用于存储计数和项目值：
<div class="bookingContainer"> <div> <div class="booking-container-title"> <p>Book a laundry service</p> </div> </div> <div class="first-booking-container"> <p>What would you like to do ?</p> <select> <option class="middle">Dry Clean</option> <option class="middle">Wash</option> <option class="middle">Iron</option> </select> <FontAwesomeIcon class="select-icon" icon="chevron-down" /> </div> <!-- First Value --> <div class="second-booking-container"> <div> <div class="second-booking-container-image"><img src="./img/shirt.png" /></div> <p class="second-booking-container-icon" name="product" value="100" id="qnty_1"> Shirt(s) </p> <select onchange='totalItem()' class="center" id="first"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> </select> <FontAwesomeIcon class="select-long-icon" icon="chevron- down" /> <p class="second-booking-container-text" id='firstVal' name="price" max="3" min="1">₦100</p> </div> <div> <div class="second-booking-container-image"><img src="./img/trouser.png" /></div> <p class="second-booking-container-icon" name="product" value="100" id="qnty_2"> Trouser(s) </p> <select onchange='totalItem()' class="center" id="second"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> </select> <FontAwesomeIcon class="select-long-icon" icon="chevron- down" /> <p class="second-booking-container-text" id="secondVal" name="price" max="3" min="1">₦100</p> </div> <div> <div class="second-booking-container-image"><img src="./img/skirt.png" /></div> <p class="second-booking-container-icon" name="product" value="100" id="qnty_3"> Skirt(s) </p> <select onchange='totalItem()' class="center" id="third"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> </select> <FontAwesomeIcon class="select-long-icon" icon="chevron- down" /> <p class="second-booking-container-text" id="thirdVal" name="price" max="3" min="1">₦100</p> </div> <div> <div class="second-booking-container-image"><img src="./img/blouse.png" /></div> <p class="second-booking-container-icon" name="product" value="100" id="qnty_4"> Blouse(s) </p> <select onchange='totalItem()' class="center" id="fourth"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> </select> <FontAwesomeIcon class="select-long-icon" icon="chevron- down" /> <p class="second-booking-container-text" id="fourthVal" name="price" max="3" min="1">₦100</p> </div> <div> src="./img/jacket.png" /> </div> <p class="second-booking-container-icon-long" name="product" value="100" id="qnty_5">Suit/Jacket(s) </p> <select onchange='totalItem()' class="center" id="fifth"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> </select> <FontAwesomeIcon class="select-long-icon" icon="chevron- down" /> <p class="second-booking-container-text" id="fifthVal" name="price" max="3" min="1">₦100</p> </div> </div> <div class="third-booking-container"> <p id="total">Total: <span>₦0.00</span></p> <button> Set pick up date <FontAwesomeIcon class="second-container-button-right" icon="angle-right" /> </button> </div> </div> <script> let first = document.querySelector('#first'); let second = document.querySelector('#second'); let third = document.querySelector('#third'); let fourth = document.querySelector('#fourth'); let fifth = document.querySelector('#fifth'); //invoke this function when the input changes on individual // selected elements const totalItem = () => { let firstValue = `${first.options[first.selectedIndex].value}` let secondValue = `${second.options[second.selectedIndex].value}` let thirdValue = `${third.options[third.selectedIndex].value}` let fourthValue = `${fourth.options[fourth.selectedIndex].value}` let fifthValue = `${fifth.options[fifth.selectedIndex].value}` console.table(firstValue, secondValue, thirdValue, fourthValue, fifthValue) //call function for each cloths and pass 3 values(the selected // number, the constant(₦100) and where to update) multiplySelectedwithConstVal(firstValue, firstValNo, firstVal); multiplySelectedwithConstVal(secondValue, secondValNo, secondVal); multiplySelectedwithConstVal(thirdValue, thirdValNo, thirdVal); multiplySelectedwithConstVal(fourthValue, fourthValNo, fourthVal); multiplySelectedwithConstVal(fifthValue, fifthValNo, fifthVal); //total addition of all values let selectedValArray = []; const total = () => { selectedValArray.push( parseInt(firstVal.innerHTML.replace("₦", "")), parseInt(secondVal.innerHTML.replace("₦", "")), parseInt(thirdVal.innerHTML.replace("₦", "")), parseInt(fourthVal.innerHTML.replace("₦", "")), parseInt(fifthVal.innerHTML.replace("₦", "")) ); return selectedValArray.reduce((accu, currentVal) => accu + currentVal, 0); } var totalval = total(); finalVal.innerHTML = `Total: <span>₦${totalval}</span>`; localStorage.clear(); localStorage.setItem("firstVal",firstValNo); localStorage.setItem("secondVal", secondValNo); localStorage.setItem("thirdVal", thirdValNo); localStorage.setItem("fourthVal", fourthValNo); localStorage.setItem("fifthVal", fifthValNo); localStorage.setItem("firstValCount", firstValue); localStorage.setItem("secondValCount", secondValue); localStorage.setItem("thirdValCount", thirdValue); localStorage.setItem("fourthValCount", fourthValue); localStorage.setItem("fifthValCount", fifthValue); localStorage.setItem("finalVal", totalval); } //target elements that will be updated and let firstVal = document.querySelector('#firstVal'); let secondVal = document.querySelector('#secondVal'); let thirdVal = document.querySelector('#thirdVal'); let fourthVal = document.querySelector('#fourthVal'); let fifthVal = document.querySelector('#fifthVal'); let finalVal = document.querySelector('#total'); //convert ₦100 to number for multiplication //converted the innerhtml to number let firstValNo = parseInt(firstVal.innerHTML.replace("₦", "")); let secondValNo = parseInt(secondVal.innerHTML.replace("₦", "")); let thirdValNo = parseInt(thirdVal.innerHTML.replace("₦", "")); let fourthValNo = parseInt(fourthVal.innerHTML.replace("₦", "")); let fifthValNo = parseInt(fifthVal.innerHTML.replace("₦", "")); //multiply selected value with constant and update const multiplySelectedwithConstVal = (i, k, update) => { let result = parseInt(i) * k return update.innerHTML = `₦${result}` } </script>
这是带有加/减逻辑的“摘要”页面的代码
<div class="summaryContainer"> <div class="summaryNavBar"><p className="summaryTitle">Summary</p> </div> <div class="summaryContent"> <p class="total" id="total">Total:</p> </div> <div class="summaryCard"> <div class="summary-card-title"> <div>Item</div> <div>Quantity</div> </div> <div class="summary-card-content"> <div >Shirt(s)</div><div id=" first" class="summary-quantity"><button type="button" id="sub" class="sub">−</button> <input type="text" id="firstVal" value="0" class="field" /> <button type="button" id="add" class="add">+</button> </div> </div> <div class="summary-card-content"> <div>Trouser(s)</div> <div class="summary-quantity" id="second"> <button type="button" id="sub" class="sub">−</button> <input type="text" id="secondVal" value="0" class="field" /> <button type="button" id="add" class="add">+</button> </div> </div> <div class="summary-card-content" id="third"> <div>Suit(s)</div><div class="summary-quantity"><button type="button" id="sub" class="sub">−</button> <input type="text" id="thirdVal" value="0" class="field" /> <button type="button" id="add" class="add">+</button> </div> </div> <p class=" more">..more</p> </div> <div class="summaryButton"> <button class="button-left"><span><FontAwesomeIcon class="buttonLeft" icon="angle-left"/></span>Back</button> <button class="button-right">Proceed to payment<FontAwesomeIcon class="buttonRight" icon="angle-right"/></button> </div> </div> </body> </html> <script> var firstValue = localStorage.getItem('firstVal'); var secondValue = localStorage.getItem('secondVal'); var thirdValue = localStorage.getItem('thirdVal'); var finalValue = localStorage.getItem('finalVal'); var firstValueCount = localStorage.getItem('firstValCount'); var secondValueCount = localStorage.getItem('secondValCount'); var thirdValueCount = localStorage.getItem('thirdValCount'); var finalVal = document.querySelector('#total'); finalVal.innerHTML = `Total: <span>₦${finalValue}</span>`; document.getElementById('firstVal').value = firstValueCount ; document.getElementById('secondVal').value = secondValueCount ; document.getElementById('thirdVal').value = thirdValueCount ; var first = document.querySelector('#first'); var second = document.querySelector('#second'); var third = document.querySelector('#third'); var fourth = document.querySelector('#fourth'); var fifth = document.querySelector('#fifth'); //invoke this function when the input changes on individual // selected elements function calSum(el ,type){ if(type == "add"){ var id = (el.previousSibling.previousElementSibling.id); var count = parseInt(el.previousSibling.previousElementSibling.value); // increment count by one var final_count = (count + 1); el.previousSibling.previousElementSibling.value = final_count; }else{ var id = (el.nextSibling.nextElementSibling.id); var count = parseInt(el.nextSibling.nextElementSibling.value); // decrement count by one var final_count = (count - 1); el.nextSibling.nextElementSibling.value = final_count; } var totalSum = parseInt(localStorage.getItem('finalVal')); var price = 100; if(id === 'firstVal'){ totalSum = (totalSum + (price * final_count)) -(count *price) ; localStorage.setItem("firstValCount", final_count); }else if(id === 'secondVal'){ totalSum = (totalSum + (price * final_count)) -(count *price); localStorage.setItem("secondValCount", final_count); }else if(id === 'thirdVal'){ totalSum = (totalSum + (price * final_count)) -(count *price) ; localStorage.setItem("thirdValCount", final_count); } console.log(totalSum); localStorage.setItem("finalVal", totalSum); document.querySelector('#total').innerHTML = `Total: <span>₦${totalSum}</span>`; } var classname = document.getElementsByClassName("add"); for (var i = 0; i < classname.length; i++) { classname[i].addEventListener('click', function(){ calSum(this,'add'); } , false); } var sub = document.getElementsByClassName("sub"); for (var i = 0; i < sub.length; i++) { sub[i].addEventListener('click', function(){ calSum(this,'sub'); } , false); } </script>
在angularJS中将数据从一个html页面传递到另一个html页面
[英]Pass data from one html page to another html page in angularJS
如何使用JQuery将数据从一个HTML页面传递到另一HTML页面？
[英]How to pass data from one HTML page to another HTML page using JQuery?
如何仅使用JavaScript将表单数据从一个HTML页面传递到另一HTML页面？
[英]How do I pass form data from one HTML page to another HTML page using ONLY javascript?
如何使用Phonegap中的JavaScript将数据从一个html传递到另一个html页面？
[英]How to pass the data from one html to another html page using JavaScript in Phonegap?
如何使用 JavaScript 将数据从一个 HTML 页面传递到另一个页面
[英]How can i pass data from one HTML page to another using JavaScript
如何使用JavaScript将列表组之类的数据从一个HTML页面传递到另一HTML页面？
[英]How can I pass data like list group from one html page to another using JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何将数据从一个页面传递到另一个页面html
如何在html中将数据从一个页面传递到另一个页面？
在angularJS中将数据从一个html页面传递到另一个html页面
如何将数据从html页面传递到另一个页面？
如何使用JQuery将数据从一个HTML页面传递到另一HTML页面？
如何仅使用JavaScript将表单数据从一个HTML页面传递到另一HTML页面？
如何使用Phonegap中的JavaScript将数据从一个html传递到另一个html页面？
如何将数组从一个HTML传递到另一个HTML页面？
如何使用 JavaScript 将数据从一个 HTML 页面传递到另一个页面
如何使用JavaScript将列表组之类的数据从一个HTML页面传递到另一HTML页面？
相关标签