我正在尝试 HTML5 教程中的这个 sessionStorage 示例，但它不起作用并且 'rightbox' 部分没有任何变化

Question

'rightbox' 部分必须显示使用 sessionStorage 存储后在表单中输入的键和值。我尝试了 Chrome、Firefox、Edge 和 Opera 浏览器。该代码对其中任何一个都不起作用。

代码如下：

function doFirst() {
  var button = document.getElementById('button');
  button.addEventListener('click', saveStuff, false);
}

function saveStuff() {
  var one = getElementById('one').value;
  var two = getElementById('two').value;
  sessionStorage.setItem(one, two);
  display(one);
}

function display(one) {
  var rightbox = document.getElementById('rightbox');
  var thedata = sessionStorage.getItem(one);
  rightbox.innerHTML = 'Name of variable: ' + one + '<br />Value: ' + thedata;
}

window.addEventListener('load', doFirst, false);

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <section id="leftbox">
    <form>
      <p>(key) One: <input type="text" id="one"></p>
      <p>(value) Two: <textarea id="two"></textarea></p>
      <p><input type="button" id="button" value="Save"></p>
    </form>
  </section>
  <section id="rightbox">
    Nothing yet!
  </section>
</body>

</html>

Answer 1

您的代码中的以下块：

function saveStuff() {
    var one = getElementById('one').value;
    var two = getElementById('two').value;
    console.log(one, two);
    sessionStorage.setItem(one, two);
    display(one);
}

您需要使用 document.getElementById() 而不仅仅是 getElementById。这将解决您的问题。

此外，您已经在第一个函数中正确使用了 document.getElementById()，因此请务必在下次发布问题之前检查浏览器控制台中的错误。这将帮助你长期运行.

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

我正在尝试 HTML5 教程中的这个 sessionStorage 示例，但它不起作用并且 'rightbox' 部分没有任何变化

I'm trying this example of sessionStorage from an HTML5 tutorial but it is not working and nothing is changing in the 'rightbox' section

html

javascript

google-chrome

innerhtml

session-storage