Запись в несколько экземпляров тега HTML с JavaScript только запись в первый тег - PullRequest
Новая
       8

Запись в несколько экземпляров тега HTML с JavaScript только запись в первый тег

1 голос
/ 01 мая 2020

Мне нужна помощь, чтобы выяснить, что здесь происходит. У меня есть документ 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 на основе выходных данных запроса, поэтому в зависимости от размера запроса общее количество страниц может измениться: страница обложки + страницы данных.

Ответы [ 2 ]

2 голосов
/ 01 мая 2020

Ваша проблема будет выделена, если вы использовали валидатор .

* id должен быть уникальным в документе.

Восстановление после ошибок означает, что getElementById получает первое совпадение.

Используйте class, если вы хотите группу элементов вместо уникальной идентификации одного элемента.

0 голосов
/ 01 мая 2020

У вас есть дубликат атрибута id, который недопустим, используйте вместо него атрибут класса, также используйте 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...