Question

我有一个页面，其中一个表单，用户可以选择一年，看看他是否知道某个日期，例如WWI的开始，使用以下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>

用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

但这不起作用，在第二页中，应该出现年份，它显示“[对象HTMLInputElement]”，但是以粗体显示并且我在javascript中指定了红色。我似乎无法找到我的错误。任何帮助将非常感谢！

Answer 1

您设置f1以包含整个元素，而不仅仅是其值：

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

试试这个：

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

Answer 2

您正在将会话密钥s1保存到input元素，而不是输入元素的值。

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

填写<span>不起作用</span>

2 个答案: