如何计算按钮以外的元素的点击次数

Question

我在页脚部分有一个空框，它位于div 中

<footer>
<div>
</div>
</footer>

我想用javascript写一个函数，计算div中的点击次数，并显示同一div中的单击次数。我想知道如何在不接触html的情况下实现这一点。我已经看到了如何用按钮来实现这一点，但如何用div来实现呢？感谢

Answer 1

如果不想添加任何ID或类，请使用.querySelector。

var elem = document.querySelector('footer div');
let countClicks = 0;
elem.onclick = function() { 
countClicks++;
elem.textContent = countClicks
};

div {
padding:10px;
background: #339900; 
color: #fff;
font-size: 44px;
}

<footer>
<div></div>
</footer>

Answer 2

var root = document.getElementById('root');
root.onclick = function() { 
var elem = document.getElementById('count');
elem.innerHTML = +elem.innerText + 1;
};

#count {
font-size: 40px;
font-weight: bold;
}

<footer>
<div id="root">Click HERE</div>
<div id="count"></div>
</footer>

Answer 3

这是解决方案。

const div = document.querySelector('footer > div');
div.addEventListener('click', () => {
const previousValue = Number.parseInt(div.innerText || 0);
div.innerText = previousValue + 1;
});

footer div {
width: 100px;
height: 100px;
background: #ccc;
}

<footer>
<div>
</div>
</footer>