Question

我正在尝试为一个项目建立一个全球点库，我一直在努力获得我需要的基本原型。

我问了一个关于如何保存变量的问题，我得到了一个答案，但是，它似乎没有用，如果我只是问一个新的话可能会更好问题而不是花费大量时间与一个人在评论中谈论。

我的问题是，当我按下按钮时，它不会更新。

代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Javascript variable testing</title>
    </head>
    <body>
        <script type="tex/javascript">
var clicks = 500000;

function onClick() {
  clicks += 1;
  localStorage.setItem('clicks', clicks); // update the value
  document.getElementById("clicks").innerHTML = clicks;

  localStorage.setItem('clicks', clicks); // set the value to localStorage
};

window.onload = function() {
  clicks = localStorage.getItem('clicks'); // get the value from localStorage
};
        </script>
        <button type="button" onclick="onClick()">Click this bit</button>
            <p>Clicks: <a id="clicks">500000</a>
            </p>
    </body>
</html>

此外，如果有人可以制作他们的代码以使变量保持不变，即使是使用不同计算机的人，也会非常感激。

Answer 1

用此

替换yoiur脚本标记

  <script type="text/javascript"> // Small misspelled
var clicks = 500000;

function onClick() {
  clicks += 1;
  localStorage.setItem('clicks', clicks); // update the value
  document.getElementById("clicks").innerHTML = clicks;

  localStorage.setItem('clicks', clicks); // set the value to localStorage
} // Removed semicolon you added by mistake

window.onload = function() {
  clicks = localStorage.getItem('clicks'); // get the value from localStorage
};
</script>

Answer 2

你在脚本类型拼写错误。将其更正为：<script type="text/javascript">

对你的评论反应，我会这样做：

<script type="text/javascript">
    var clicks; // variable initialization

    function onClick() {
      clicks = +clicks + 1; // + operator casts value to number
      document.getElementById("clicks").innerHTML = clicks;
      localStorage.setItem('clicks', clicks); // set the value to localStorage
    };

    window.onload = function() {
      clicks = localStorage.getItem('clicks') || 500000; // get the value from localStorage, otherwise (if is null) set 500000 clicks
      document.getElementById("clicks").innerHTML = clicks;
    };
</script>

Answer 3

你忘记了，

 <script type="text/javascript">

之后似乎正在工作。

Answer 4

将tex/javascript更改为text/javascript。
你必须parseInt()来自localstorage的值（否则它是一个字符串）。

<!DOCTYPE HTML>
<html>

  <head>
    <title>Javascript variable testing</title>

    <script type="text/javascript">
      var clicks;

      function onClick() {
        clicks += 1;
        localStorage.setItem('clicks', clicks); // update the value
        document.getElementById('clicks').innerHTML = clicks;
      }

      window.onload = function() {
        clicks = parseInt(localStorage.getItem('clicks')) || 500000; // get the value from localStorage and parse it to int
        document.getElementById('clicks').innerHTML = clicks;
      };

    </script>
  </head>

  <body>
    <button type="button" onclick="onClick()">Click this bit</button>
    <p>Clicks: <a id="clicks">500000</a>
    </p>
  </body>

</html>

JSFiddle

Answer 5

代码中的小错误，否则一切都很好

<!DOCTYPE HTML>
<html>
<head>
<title>Javascript variable testing</title>
</head>
<body>

<script type="text/javascript"> // Small misspelled
var clicks = 500000;

function onClick() {
  clicks += 1;
  localStorage.setItem('clicks', clicks); // update the value
  document.getElementById("clicks").innerHTML = clicks;

  localStorage.setItem('clicks', clicks); // set the value to localStorage
} // Removed semicolon you added by mistake

window.onload = function() {
  clicks = localStorage.getItem('clicks'); // get the value from localStorage
};
</script>

<button type="button" onclick="onClick()">Click this bit</button>
<p>Clicks: <a id="clicks">500000</a></p>

</body>
</html>

有人可以帮助我理解为什么这个JavaScript代码不起作用，以及我如何解决它？

5 个答案: