Question

我正在使用下面的clickCounter函数：

<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML =  localStorage.clickcount ;
    } else {
        document.getElementById("result").innerHTML = "";
    }
}
</script>

我可以使用onclick = clickCounter来处理按钮，该按钮在下面的代码中显示计数器值。但是，当页面加载时，我无法触发clickCounter（）函数，以便显示计数器值。

换句话说，在页面加载时，我需要触发对函数的调用，以便id =“result”具有计数值。

<script>
  document.getElementById("result").innerHTML =  localStorage.clickcount ;
</script>

<font face="arial" size="3" color="black"><div>
<span id="result"></span> Downloads
</div></font>

Answer 1

您需要做的就是将您的.innerHTML设置在 window.onload 功能中：

＆＃13;

window.onload = function() {
  //document.getElementById("result").innerHTML = localStorage.clickcount;
  document.getElementById("result").innerHTML = 3;
}

＆＃13;

<div>
  <span id="result"></span> Downloads
</div>

＆＃13;

除此之外，{+ 1}}标记自HTML 4.0.1起已被弃用，并且在HTML5中均为obsolete and unsupported。请使用CSS代替样式。

希望这有帮助！

Answer 2

在html标签后调用你的javascript。

<font face="arial" size="3" color="black"><div>
<span id="result"></span> Downloads
</div></font>
<script>
  document.getElementById("result").innerHTML =  localStorage.clickcount ;
</script>

Working fiddle

Answer 3

首先将其纳入某个功能

<font>

而不是像这样称呼它

function clickCounter()
{
    document.getElementById("result").innerHTML =  localStorage.clickcount;
}

或者只是你可以这样做

<body onload="clickCounter();">

Answer 4

当DOM解析器暂停以解释您的<script>标记时 document.getElementById("result").... 在DOM树中没有这样的#result元素 而是将您的<script>标记放在收尾</body>标记之前，以确保读取所有DOM＆amp;准备被操纵了。
<font> tg is obsolete，请改用CSS。
不要使用内联JS onclick。这是一种不好的做法，使代码难以维护 Use Element.addEventListener()而不是
在 2018 中，您应该not care much about 12+years old browsers IE6, 7。
希望您知道计数器仅适用于一个用户 。其他用户不会看到下载总数。为此，您需要一个小型服务器端脚本来将您的计数器存储到Flat-File或数据库表中。

最后：（jsFiddle live demo）

<强> CSS

.text-small { font: 11px/1.4 sans-serif; }

<强> HTML

<div>
  <button id="download">DOWNLOAD</button>
  <span class="text-small">
    (<span id="result"></span> Downloads)
  </span>
</div>

JS （在关闭<script>之前的</body>标签中）

function clickCounter() {
  // Read fron localstorage or fallback to 0
  document.getElementById("result").innerHTML =  localStorage.clickcount || 0;
}

document.getElementById("download").addEventListener("click", function() {
  localStorage.clickcount = Number(localStorage.clickcount) + 1;
  clickCounter(); // Do on click 
});

clickCounter();   // and on DOM ready

这只是对你的想法的改进。如上所述，更好的方式：

将（+1）下载次数存储到服务器端数据库中。
使用localStorage仅插入特定用户下载的项目。
如果同一用户点击下载按钮的次数（防止虚假点击），则使用localStorage不更新数据库计数。

请注意，通过清除localStorage并再次点按“下载”按钮，也可以绕过 - 但不那么精通技术 >用户。

需要在页面加载时触发对clickCounter（）的调用

4 个答案: