我需要一些帮助来弄清楚这里发生了什么。我有一个要打印的HTML文档，但是页面计数器让我头疼。这是给我问题的代码：
<html>
<head>
<style type="text/css">
.page {
width: 8in;
height: 1in;
padding: 0em;
margin-top: .5in;
margin-left: 0in;
margin-right: 0in;
margin-bottom: 0.25in;
}
body {
color: black;
counter-reset: pagen;
font-family: "Courier New", Courier, monospace;
font-size: 10pt;
}
.footer {
counter-increment: pagen;
margin: auto;
width: 8in;
display: table;
}
#footer-left:before {
content: "Page " counter(pagen) " of ";
}
.ptable {
page-break-before: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<div class="footer">
<div id="footer-left"><span id="total"></span></div>
</div>
</div>
<div class="page">
<table class="ptable"></table>
<div class="footer">
<div id="footer-left"><span id="total"></span></div>
</div>
</div>
</body>
<script type ="text/javascript">
function pageCount() {
return document.getElementsByClassName('page').length;
}
document.getElementById("total").innerHTML = pageCount();
</script>
</html>
footer-left的第一个实例将正确输出为Page 1 of 2。第二个实例仅显示Page 2 of。这里发生了什么？作为参考，我将本文档设置为由VBA脚本根据查询输出自动生成，因此，取决于查询的总页数可能会更改为多大：封面+数据页。
如果您有used a validator，则会突出显示您的问题。
id必须在文档中为unique。
错误恢复意味着getElementById获得第一个匹配项。
如果要元素的[[group而不是唯一地标识单个元素，请使用class。
id属性，请改用class属性，也请使用document.querySelectorAll（）选择元素，这是一个有效的代码段： <html>
<head>
<style type="text/css">
.page {
width: 8in;
height: 1in;
padding: 0em;
margin-top: .5in;
margin-left: 0in;
margin-right: 0in;
margin-bottom: 0.25in;
}
body {
color: black;
counter-reset: pagen;
font-family: "Courier New", Courier, monospace;
font-size: 10pt;
}
.footer {
counter-increment: pagen;
margin: auto;
width: 8in;
display: table;
}
#footer-left:before {
content: "Page " counter(pagen) " of ";
}
.ptable {
page-break-before: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<div class="footer">
<div id="footer-left"><span class="total"></span></div>
</div>
</div>
<div class="page">
<table class="ptable"></table>
<div class="footer">
<div id="footer-left"><span class="total"></span></div>
</div>
</div>
</body>
<script type ="text/javascript">
function pageCount() {
return document.getElementsByClassName('page').length;
}
document.querySelectorAll(".total").forEach(function(el, i){
el.innerHTML = pageCount();
});
</script>
</html>