javascript - 填充 不起作用

Question

我有一个页面有一个表单，用户可以在其中输入他选择的年份，看看他是否知道某个日期，例如第一次世界大战的开始，使用以下 html:

<form style="margin: 0; padding: 0;">
    WWI started in
    <input id="f1" style="display:inline;" type="form" />
</form>

并且，在同一页面中，使用以下 javascript 获取年份并存储它:

var f1  = document.getElementById( "f1" );
sessionStorage.s1 = f1;

然后，在另一个 html 页面中，我有一些带有 <span> 的文本我想在其中显示我之前存储的年份的标签:

<p>The user says WWI started in <span id="sp1"></span>.</p>

和填充 span 的 javascript:

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

但是这是行不通的，在第二页，应该出现年份的地方，它显示了这个“[object HTMLInputElement]”，但是用粗体显示了我在 javascript 中指定的红色。我似乎找不到我的错误。非常感谢任何帮助!

Answer 1

您将 f1 设置为包含整个元素，而不仅仅是它的值:

var f1  = document.getElementById( "f1" );

试试这个:

var f1  = document.getElementById( "f1" ).value;