セッションストレージ複数の出力フィールド

Question

私はセッションストレージを使用する見積もりページと注文ページで、2つの範囲スライダの情報と価格を次のページに表示しています。

これまでのところ、両方の範囲スライダが動作していましたが、引用された価格出力要素では問題が見つかりました。私はクラスを使用する必要がありますので、注文ページで同じ値を持つ2つの出力要素を持っていますが、これはsessionStorage.getItem

で動作するかどうかわからないよう

私は、私もわからないIDを使用カント見積もり価格でセッションストレージを有効にするために使用するイベントリスナー。

は2つのスニペットで、私はコメントがあり、助けが必要なところに疑問符を使用しました。

これは私の引用ページのコードです。

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>

これは私の注文ページからコードです。ここで

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

のは、それを一緒に編集してみましょう、私の最初の試みです。

'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は、要素の全体の内容を埋めます。 「穴」を持つテンプレートのように塗りつぶす必要がある場合は、より多くのコードが必要になります。