Question

我在报价页面和订单页面上工作，使用会话存储将两个范围滑块和报价中的信息带到下一页。

到目前为止，我有两个范围滑块工作，但我发现引用价格输出元素有困难。

我无法使用Id，因为我在订单页面上有两个具有相同值的输出元素，所以我需要使用一个类但不确定这是否适用于sessionStorage.getItem

我也不确定我应该使用什么事件监听器来激活报价的会话存储。

下面是两个片段，我在需要帮助的地方注释并使用了问号。

这是我的报价页面中的代码。

＆＃13;

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);

}

＆＃13;

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

＆＃13;

这是我的订单页面中的代码。

＆＃13;

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);

}

＆＃13;

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

＆＃13;

Answer 1

这是我的第一次尝试，让我们一起编辑。

'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填充元素的全部内容。如果你需要填充它像模板与＆＃34;孔＆＃34;那么它将需要更多的代码 - 请问我。）

会话存储多个输出字段

1 个答案: