lundi 10 août 2020

Retrieved session-storage variable not being recognised in a jquery condition

I'm restoring a session-storage variable which is then used in a condition to highlight one of two buttons. For some reason the variable is successfully retrieved but not being understood in the condition. In the fiddle, simply click either "Monthly selection" or "Annual selection", then "Save to session storage". When clicking "Restore from session storage" the correct button should re-highlight. I've tried '===' but makes no difference. Must be something obvious but I'm stumped. Any help much appreciated.

<div id="Date_buttons_container_tr">
<input type="button" value="Annual selection" id="Annual_date_button" >
<input type="button" value="Monthly selection" id="Monthly_date_button"">
</div>
<br> 
<br>
<input type='button' id='save_to_SessionStorage' value='Save to session storage' />
<br>
<br>
<br>
<input type='button' id='restore_from_SessionStorage' value='Restore from session storage' />

Script

$('#Annual_date_button').click(function(){
$('#Annual_date_button').addClass("LabelHighlight")
$('#Monthly_date_button').removeClass("LabelHighlight")
});

$('#Monthly_date_button').click(function(){
$('#Monthly_date_button').addClass("LabelHighlight")
$('#Annual_date_button').removeClass("LabelHighlight")
});
//---------


$('#save_to_SessionStorage').click(function() {

var myDateTypeString = "";

if ( $('#Annual_date_button').hasClass("LabelHighlight") )
{ myDateTypeString = "AnnualData" }
else
{ myDateTypeString = "MonthlyData" }

sessionStorage.setItem('TradeDate_type', JSON.stringify(myDateTypeString));
console.log('TradeDate_type saved as:', JSON.stringify(myDateTypeString));

$('#Annual_date_button').removeClass("LabelHighlight")
$('#Monthly_date_button').removeClass("LabelHighlight")
})
//---------

$('#restore_from_SessionStorage').click(function() {

var myDateTypeString = "";
var retrieve_DateSelection = sessionStorage.getItem('TradeDate_type');

myDateTypeString = sessionStorage.getItem('TradeDate_type');
console.log('Data restored as: ',myDateTypeString);

if ( myDateTypeString == "AnnualData" )
{ console.log('Im in Annual');
    $('#Annual_date_button').addClass("LabelHighlight");
}

if ( myDateTypeString == "MonthlyData" )
{ console.log('Im in Monthly');
    $('#Monthly_date_button').addClass("LabelHighlight");
}
})

Style

.LabelHighlight{
background: yellow;
}

Fiddle: https://jsfiddle.net/6px3vscd/

Aucun commentaire:

Enregistrer un commentaire