Javascript说函数并没有定义

Question

只想创建一个带有两个按钮的简单计数器，一个按钮加1，另一个按钮减1。我使用的是JS和HTML。JS说add((和sub((都不是函数。这段代码适用于codepen.io、JSFiddle和JSHint；两个未使用的变量"；。

HTML

<div class="main">
<div id="button">
<h1>Click Me</h1>
<p>Number<button id="add" onclick="add()">+</button></p>
<span id="result"></span>    
<button id="sub" onclick="sub()">-</button>
</div>
</div>

JS

var x = 0

function add(){
document.getElementById("result").innerHTML = x+=1;
}
function sub(){
document.getElementById("result").innerHTML = x-=1;
}

Answer 1

我认为应该是这样的：

var x = 0
function add() {
document.getElementById("result").innerHTML = x += 1;
}
function sub() {
document.getElementById("result").innerHTML = x -= 1;
}

<div class="main">
<div id="button">
<h1>Click Me</h1>
<p>Number<button id="add" onclick="add()">+</button></p>
<span id="result"></span>
<button id="sub" onclick="sub()">-</button>
</div>
</div>

您应该在<script></script>标签之间编写JavaScript

<div class="main">
<div id="button">
<h1>Click Me</h1>
<p>Number<button id="add" onclick="add()">+</button></p>
<span id="result"></span>    
<button id="sub" onclick="sub()">-</button>
</div>
</div>
<script>
var x = 0
function add(){
document.getElementById("result").innerHTML = x+=1;
}
function sub(){
document.getElementById("result").innerHTML = x-=1;
}
</script>

Answer 2

您应该避免在没有分号的情况下在同一行中两次使用assing运算符。

如下所示，您必须为每个函数在同一行中分配运算符。在代码中，它类似于说
b=a=a+1

var x = 0

function add(){
x+=1;
document.getElementById("result").innerHTML = x.toString() 
}
function sub(){

x-=1;
document.getElementById("result").innerHTML =  x.toString()  
}

如果你仍然喜欢在同一行中使用你可以发现这个很有用。

var x = 0

function add(){
document.getElementById("result").innerHTML = (++x).toString();
}
function sub(){
document.getElementById("result").innerHTML = (--x).toString();
}

Answer 3

你可以试试这个，

var x=0

function add(){
document.getElementById("result").innerHTML = (++x).toString();
}
function sub(){
document.getElementById("result").innerHTML = (--x).toString();
}