JavaScript事件未响应单击

const count = document.querySelector("#count")
const btns = document.querySelectorAll("#btn")
let value = 0
btns.forEach(function(btn){
btn.addEventListener('click', function(e){
const styles = e.currentTarget.classList
if(styles.contains("increase")){
value++
} else if(styles.contains("decrease")){
value--
} else {
value = 0
}
if(count > 0){
count.styles.color = "green"
} 
if(count < 0){
count.styles.color = "red"
}
if(count === 0){
count.styles.color = "black"
}
count.textContent = value
})
})
// here I am trying to get button clicks but nothing is happening, not even console logs popup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Counter</h1>
<p id="value">0</p>
<button id="btn decrease">Decrease</button>
<button id="btn reset">Reset</button>
<button id="btn increase">Increase</button>
</div>
<script src="index.js"></script>
</body>
</html>

活动不起作用，也许我忘记添加了什么？

编辑：对进行了几次更改

你有document.querySelector("#count")，但在html中你使用的是id＝"；值"；。

正如@Ivar所指出的，id应该是唯一的，所以在这种情况下最好使用class。所以一切都改为上课。您的if正在检查count，它是html元素，而不是value，这就是计数着色不起作用的原因。

const count = document.querySelector("#count")
const btns = document.querySelectorAll(".btn")
let value = 0
btns.forEach(function(btn){
btn.addEventListener('click', function(e){
const styles = e.currentTarget.classList
if(styles.contains("increase")){
value++
} else if(styles.contains("decrease")){
value--
} else {
value = 0
}
if(value > 0){ // changed
count.style.color = "green"
} 
if(value < 0){ // changed
count.style.color = "red"
}
if(value === 0){ // changed
count.style.color = "black"
}
count.textContent = value
})
})

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Counter</h1>
<p id="count">0</p><!--changed-->
<button class="btn decrease">Decrease</button><!--changed-->
<button class="btn reset">Reset</button><!--changed-->
<button class="btn increase">Increase</button><!--changed-->
</div>
<script src="index.js"></script>
</body>
</html>

您的脚本中有几个问题：

我用class="btn decrease"替换了id="btn decrease"，因为element.classList显然只适用于类属性
你的条件if (count > 0)...应该是if (value > 0) ...
没有元素属性styles，请改用style

const count = document.querySelector("#value");
const btns = document.querySelectorAll(".btn")
let value = 0
btns.forEach(function(btn){
btn.addEventListener('click', function(e){
const styles = e.currentTarget.classList
if(styles.contains("increase")){
value++
} else if(styles.contains("decrease")){
value--
} else {
value = 0
}
if(value > 0){
count.style.color = "green"
} else if(value < 0){
count.style.color = "red"
} else {
count.style.color = "black"
}
count.textContent = value
})
})

<div class="container">
<h1>Counter</h1>
<p id="value">0</p>
<button class="btn decrease">Decrease</button>
<button class="btn reset">Reset</button>
<button class="btn increase">Increase</button>
</div>

通过避免重复，整个脚本可以缩短很多：

const count = document.querySelector("#value");
document.querySelectorAll(".container button").forEach(function(btn,i){
btn.addEventListener('click', (e)=>{
let val=+count.textContent;
val = i===1 ? 0 : val+(i?+1:-1)
count.textContent = val
count.style.color = val>0?"green":val<0?"red":"black";
});
})

<div class="container">
<h1>Counter</h1>
<p id="value">0</p>
<button>Decrease</button>
<button>Reset</button>
<button>Increase</button>
</div>

相关内容

最新更新

热门标签：