我的页面生成多个具有相同 ID 和相同 class 的 div。 我想用相同的 javascript 按钮打印它们

Question

So far I managed to print only the first div while using the getElementById() option. However, since my page generates multiple divs with the same ID it is not possible to print them all with the same print function. I am looking into the getElementsByClassName() option, but I am not able to get it to print all of the generated divs on the page. So far I am getting the "undefined" option.

Here is my javascript code:

function printFunc() {
var divToPrint = document.getElementById("printableArea");
var htmlToPrint = '' +
    '<style type="text/css">' +
    'table th, table td {' +
    'border:1px solid #000;' +
    'padding;0.5em;' +
    '}' +
    '</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write("<h3 align='center'>Print Page</h3>");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}

Here is how I call it into the page:

<input type="button" id="btn" value="Print" onclick="printFunc();">

The I am trying to print is setup like:

<div id="printableAreaID">
<div class="printArea">
<table>
   Contents...
</table>
</div>
</div>

I should maybe mention that this is on Moodle 3.6.2, on a database activity where I have three separate fields to input CSS, javascript and any html I deem necesary, without the need of defining Head and body tags.

Answer 1

You should use a class instead of an id however you should be able to use document.querySelectorAll("") to get an array of all the elements with that query.

function click() {
  var elements = document.querySelectorAll("#printableArea");
  elements.forEach((divToPrint) => {
    // your code
  });
}