会话存储多个输出字段

Question

I'm working on a quote page and order page that use session storage to bring the information from two range sliders and the quoted price into the next page.

So far I have both range sliders working but am finding difficulty with the quoted price output element.

I cant use an Id as I have two output elements with the same value on the order page so I would need to use a class but am not sure if this would work with sessionStorage.getItem

I am also not sure what event listener I should use to activate the session storage on the quoted price.

below are two snippets and I have commented out and used question marks where I need help.

This is the code from my quote page.

 if (true) { var weightOut = document.getElementById('weightOutputId'), weightIn = document.getElementById('weightInputId'), distanceOut = document.getElementById('distanceOutputId'), distanceIn = document.getElementById('distanceInputId'); //calPrice = document.getElementsByClassName('calP'); ??? weightOut.value = sessionStorage.getItem('weightOutputId'); weightIn.value = sessionStorage.getItem('weightInputId'); distanceOut.value = sessionStorage.getItem('distanceOutputId'); distanceIn.value = sessionStorage.getItem('distanceInputId'); //calPrice.value = sessionStorage.getItem('calP'); ??? // window.onload = function (){ ?? // sessionStorage.setItem('calP', calPrice.value); ??? //} ?? weightIn.addEventListener('input', function () { sessionStorage.setItem('weightOutputId', weightOut.value); sessionStorage.setItem('weightInputId', weightIn.value); }, false); distanceIn.addEventListener('input', function () { sessionStorage.setItem('distanceOutputId', distanceOut.value); sessionStorage.setItem('distanceInputId', distanceIn.value); }, false); } 

 <form action="#" method="post" oninput="quote.value = distanceInputId.value * weightInputId.value +4;"> <label for="weightOutputId" class="formQ"> Weight (kg): </label> <output name="weightOutputName" id="weightOutputId"> 1 </output> <input type="range" name="weightInputName" id="weightInputId" value="1" min="1" max="10" oninput="weightOutputId.value = weightInputId.value" class="formR"> <label for="distanceInputId" class="formQ"> Distance (km): </label> <output name="distanceOutputName" id="distanceOutputId"> 1 </output> <input type="range" name="distanceInputName" id="distanceInputId" value="1" min="1" max="20" oninput="distanceOutputId.value = distanceInputId.value" class="formR"> <span class="calP"> Calculated Price: € </span> <output name="quote" class="calP"> 5 </output> </form> 

This is the code from my order page.

 if (true) { var weightOut = document.getElementById('weightOutputId'), weightIn = document.getElementById('weightInputId'), distanceOut = document.getElementById('distanceOutputId'), distanceIn = document.getElementById('distanceInputId'); //calPrice = document.getElementsByClassName('calP'); ??? weightOut.value = sessionStorage.getItem('weightOutputId'); weightIn.value = sessionStorage.getItem('weightInputId'); distanceOut.value = sessionStorage.getItem('distanceOutputId'); distanceIn.value = sessionStorage.getItem('distanceInputId'); //calPrice.value = sessionStorage.getItem('calP'); ??? // window.onload = function (){ ?? // sessionStorage.setItem('calP', calPrice.value); ??? //} ?? weightIn.addEventListener('input', function () { sessionStorage.setItem('weightOutputId', weightOut.value); sessionStorage.setItem('weightInputId', weightIn.value); }, false); distanceIn.addEventListener('input', function () { sessionStorage.setItem('distanceOutputId', distanceOut.value); sessionStorage.setItem('distanceInputId', distanceIn.value); }, false); } 

 <form id="contact_form" action="#" method="post" oninput="quote.value = distanceInputId.value * weightInputId.value +4, quoteT.value = distanceInputId.value * weightInputId.value +4;"> <label for="weightInputId" class="formQ"> Weight (kg): </label> <output name="weightOutputName" id="weightOutputId"> 1 </output> <input type="range" name="weightInputName" id="weightInputId" value="1" min="1" max="10" oninput="weightOutputId.value = weightInputId.value" class="formR"> <label for="distanceInputId" class="formQ"> Distance (km): </label> <output name="distanceOutputName" id="distanceOutputId"> 1 </output> <input type="range" name="distanceInputName" id="distanceInputId" value="1" min="1" max="20" oninput="distanceOutputId.value = distanceInputId.value" class="formR"> <span class="calP"> Calculated Price: € </span> <output name="quote" class="calP" id="keepNum"> 5 </output> <!-- the rest of my form goes here--> <span class="calP"> Calculated Price: € </span> <output name="quoteT" class="calP"> 5 </output> </form> 

Answer 1

Here is my first try, let's edit it together.

'use strict'; // Strict mode is a good thing.

// ... Somehow you get a value for your price and store it:

const calculatedPrice = ...;
sessionStorage.setItem('calP', calculatedPrice)

// ... Then you read it and fill multiple fields with it.

let calculatedPrice = parseFloat(sessionStorage.getItem('calP'));
if (!calculatedPrice && calculatedPrice !== 0) {
  calculatedPrice = ...; // Get it somehow.
  sessionStorage.setItem('calP', calculatedPrice); // Update it.
}

// Now render all the fields!
const elements = Array.from(document.getElementsByClassName('calP'));
elements.forEach(function(el) { el.innerText = calculatedPrice; })

el.innerText fills the whole content of an element. If you need to fill it like a template with "holes" then it will require more code — ask me for it).