Q: Filling  doesn't work I have one page with a form where the user would put a year of his choice, to see if he knows some date, for example the start of WWI, with the following html:
<form style="margin: 0; padding: 0;">
    WWI started in
    <input id="f1" style="display:inline;" type="form" />
</form>

and, in the same page, the following javascript to get the year and store it:
var f1  = document.getElementById( "f1" );
sessionStorage.s1 = f1;

Then, in another html page, i have some text with a <span> tag where I would like to display the year I stored before:
<p>The user says WWI started in <span id="sp1"></span>.</p>

And the javascript to fill the span:
var f1 = sessionStorage.getItem( "s1" );
var q1 = document.getElementById( "sp1" )
q1.innerHTML = f1;
q1.style.fontWeight = "bold";
q1.style.color = "#DF0101"; // In color red in case it is incorrect
if ( f1 == "1939" ) { q1.style.color = "#2ECCFA"; } // In color green in case it is correct

But this is not working, in the second page, where the year should appear, it displays this "[object HTMLInputElement]", but in bold and with the color red I assigned in the javascript. I can't seem to find my mistakes. Any help will be very much appreciated!

A: You're setting f1 to contain the whole element, rather than just its value:
var f1  = document.getElementById( "f1" );

Try this:
var f1  = document.getElementById( "f1" ).value;


A: You are saving the session key s1 to the input element, instead of the input element's value.
var f1  = document.getElementById( "f1" );
sessionStorage.s1 = f1.value;

