Question

我正在尝试制作一个简单的点击计数器。我相信我的JS声音不错，但是从调用它的HTML按钮上没有任何功能。

我尝试使用..

从HTML按钮调用我的JS函数。

go http.ListenAndServe(":8081", nil)

..但是按钮只是不产生输出。以下是带有我的JS函数和HTML的问题示例。

 <button onclick="addOne()"

到目前为止，只需按，数字便保持不变。我试图每次单击按钮时使数字增加1。

Answer 1

因为您的代码不起作用的原因在文档中：

const：常量是块作用域的，非常类似于使用let语句定义的变量。常量的值不能通过重新分配来更改，也不能重新声明。

还建议将“ onclick”更改为“ onClick”

function addOne(){
    var foo = document.getElementById('thisone').innerHTML;
    foo++;
    document.getElementById('thisone').innerHTML = foo;
};

<div>
    <h1><span id="thisone">1</span></h1>
    <button onClick="addOne()" type="submit">Button</button>
</div>

Answer 2

要解决此问题，您必须将const关键字替换为let关键字。这是因为const声明了一个块范围的只读命名常量。同时，let声明了一个块作用域的局部变量，可以选择将其初始化为一个值。用外行术语来说，如果您不打算更新或更改变量，请使用const；如果要更新或更改变量，请使用let。

P.S。使用var关键字是es5关键字，不建议使用，因为es6引入了let关键字和const。

您可以看到运行中的代码here on codepen

HTML

<div>
    <h1><span id="thisone">1</span></h1>
    <button onclick="addOne()" type="submit">Button</button>
</div>

JavaScript（es6）

function addOne(){
    let foo = document.getElementById('thisone').innerHTML;
    foo++;
    document.getElementById('thisone').innerHTML = foo;
};

您可以在Mozilla Developer Network.

上找到有关Javascript声明的更多信息。

Const Declaration（es6）

Let Declaration（es6）

Var Declaration（es5）

MDN也非常好learning documentation.

这也是一篇很好的解释ES6 In Depth: Const and let

的文章

Answer 3

请把您的脚本放在head标签之间，或者至少在按钮之前。

Answer 4

用let替换const，因为您正在为 foo

重新分配/更新新值

Answer 5

const关键字声明了一个常量值，因此无法使用++运算符进行修改。使用let而不是const关键字来允许修改foo变量。

HTML按钮不与Javascript交互

5 个答案: