"铁路超高"创建按钮每单击一次增量

我试图构建一些非常简单的东西，每次单击按钮，它都会将html中的数量增加1，但它不起作用，我不知道为什么：

let increment = document.getElementById("increment")
let counter = document.getElementById("counter")
let count = 0

increment.addEventListener("click",adding)

function adding() {
count +=1
counter.textContent += count
}

<!DOCTYPE html>
<head>

<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="frame">
<div class="counter">0</div>
<button id="increment" onclick="adding()"> Click</button>
<button id="reset"> Reset</button>
</div>
<script src="test.js"></script>
</body>
</html>

您的代码有很多问题。

您需要将div的id设置为counter，而不是其class。当您使用javascript中的id检索元素时
您正在代码中绑定按钮的单击事件两次。一次是在带有onclick='adding()'的HTML中，第二次是在带increment.addEventListener("click",adding)的javascript中，这会导致每次单击都会增加两次

let increment = document.getElementById("increment")
let counter = document.getElementById("counter")
let count = 0
function adding() {
counter.textContent = ++count
}

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="frame">
<div id="counter">0</div>
<button id="increment" onclick="adding()"> Click</button>
<button id="reset"> Reset</button>
</div>
<script src="test.js"></script>
</body>
</html>

您需要在标记中定义选择器：<div class="counter">0</div>。添加id="counter"
然后将counter.textContent = count++改为counter.textContent += count+=1

let increment = document.getElementById("increment")
let counter = document.getElementById("counter")
let count = 0
increment.addEventListener("click",adding)
function adding() {
counter.textContent = count
}

<!DOCTYPE html>
<head>

<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="frame">
<div id="counter" class="counter">0</div>
<button id="increment" onclick="adding()"> Click</button>
<button id="reset"> Reset</button>
</div>
<script src="test.js"></script>
</body>
</html>

试试这个。使用onclick和addEventListener使函数运行两次，因此增量总是+2。

只选择两个触发器中的一个

let increment = document.getElementById("increment")
let counter = document.getElementById("counter")
let count = 0
increment.addEventListener("click",adding)
function adding() {
count +=1
counter.textContent = count
}

<!DOCTYPE html>
<head>

<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="frame">
<div id="counter" class="counter">0</div>
<button id="increment"> Click</button>
<button id="reset"> Reset</button>
</div>
<script src="test.js"></script>
</body>
</html>

请参阅代码中的注释。

// const is enough
const increment = document.getElementById("increment")
const reset = document.getElementById("reset")
const counter = document.getElementById("counter")
// needs let because count will change
let count = 0
// correcting double adding of click handler
// increment.addEventListener("click",adding)
// but adding it for reset
reset.addEventListener("click",resetCounter)
function adding() {
count++
counter.textContent = count // not += 
}
// Added function for reset of counter
function resetCounter () {
count = 0
counter.textContent = count
}

<!DOCTYPE html>
<html><!-- Added html start tag -->
<head>        
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="frame">
<div id="counter" class="counter">0</div>
<button id="increment" onclick="adding()">Click</button>
<button id="reset"> Reset</button>
</div>
<script src="test.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：