Printing getElementsByClassName

Question

I would like to print only bits of html file that fall under certain class. I managed to create getElementById funciotn which did the job but I seemed unable to create the same for getElementsByClassName. What I need to be able to print only individual div's that have class="print", while atm I am printing only IDs.

Here is my sample of html code:

    <div id="CCC" title"Checklist"> 
        <h2>Checklist</h2>
            <div>Content</div>
</div>

<div id="BBB" title="Chapter 1">
        <h2 class="Chapter">Chapter 1</h2>
            <div><p>Content 2</p></div>

    <div>
        <table id="Ch1_tab" width="100%" border="1" style="border-color:#D2D2D2; border-collapse:collapse;">
        <div id="Q0101" class="print">
        <tr>
            <td width="41" align="left" valign="top"><div class="QNumber">1.1</div></td>
            <td><div class="QText">Name of the vessel:</div></td>
            <td width="300"><div class="Response"><input name="Text" type="text" id="vslName" size="31"></div></td>
        </tr>
        </div>
        <div id="Q0102">
        <tr>
            <td width="41" align="left" valign="top"><div class="QNumber">1.2</div></td>
            <td><div class="QText">Vessel IMO Number:</div></td>
            <td width="300"><div class="Response"><input name="Text" type="number" id="IMONum" size="10"></div></td>
        </tr>
        </div>
        <div id="Q0107" class="print">
        <tr>
            <td width="41" align="left" valign="top"><div class="QNumber">1.7</div></td>
            <td><div class="QText">How many Load Lines certificates available:</div></td>
            <td width="300"><div class="Response"><input name="Text" type="number" id="R0107" size="10"></div></td>
        </tr>
        </div>
        <div id="Q0107" class="print">
        <tr>
            <td width="41" align="left" valign="top"><div class="QNumber">1.9</div></td>
            <td><div class="QText">Date the crew commenced preparation for vetting:</div></td>
            <td width="300"><div class="Response"><input name="GenDate" class="GenDate" type="text" id="R0109"></div></td>
        </tr>
        </div>
        </table>
    </div>


<iframe name=print_frame width=0 height=0 frameborder=0></iframe>
<p>
<input type="button" value="Print Div" onclick="javascript:printDiv()">
</p>

Here is my JS to print ID="BBB"

<script>
printDivCSS = new String ('')
function printDiv() {
    window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById('BBB').innerHTML
    window.frames["print_frame"].window.focus()
    window.frames["print_frame"].window.print()
}
</script>

Thanks in advance!

What do you mean you managed to "create getElementById"? That function already exists. Is this an assignment where you need to reimplement getElementById() and getElementsByClassName()? — Michael Aaron Safyan, Mar 02 '14 at 15:01
@Michael Aaron Safyan - pardon my French)))), I ment it works for IDs only using "getElementByID. Surely I did not "create" it))) — AlexShevyakov, Mar 02 '14 at 15:03

fiction · Accepted Answer · 2014-03-02T15:42:06.047

2

getElementsByClassName returns a bunch of elements

You have to print each one of the divs while inside a for loop

var elems = document.getElementsByClassName("print");
for ( var i = 0; i < elems.length; i++ ) {
    window.frames["print_frame"].document.body.innerHTML=printDivCSS+elems[i].innerHTML;
    window.frames["print_frame"].window.focus()
    window.frames["print_frame"].window.print()
}

edited Mar 02 '14 at 15:42

answered Mar 02 '14 at 15:04

fiction

1,078
8
11

how do I apply above to my printing method? I am not really a JS pro, just getting there ))) – AlexShevyakov Mar 02 '14 at 15:39
@Alexander I'm not really sure how your function works but I made an edit, give that a try. If it doesn't work, this loop basically means "do everything inside, X number of times", the X number is defined by how many elements with the tag "print" exist. To refer to each element inside the loop, just use `elems[i]` – fiction Mar 02 '14 at 15:43
Yeh, it works. Thank you. Will I have to print each instance of div class="print". I mean the document is a checklist and it has like 40 such divs ... Seems pretty awkward)) – AlexShevyakov Mar 02 '14 at 16:08

score 1 · Answer 2 · answered Mar 02 '14 at 15:05

1

You can do this pretty trivially with document.getElementsByClassName() or with document.querySelectorAll(). Here is an example function that uses document.querySelectorAll() to find all divs with the "print" class:

  var visitAllPrintDivs = function(visitFunction) {
     var divsWithPrintClass = document.querySelectorAll('div.print');
     for (var i = 0; i < divsWithPrintClass.length; i++) {
        var divWithPrintClass = divsWithPrintClass[i];
        visitFunction(divWithPrintClass);
     }
  };

... which you can use quite simply like so:

visitAllPrintDivs(console.log);  // applies "console.log(div)" to the divs.

answered Mar 02 '14 at 15:05

Michael Aaron Safyan

93,612
16
138
200

Would it not be more likely a concatenation was needed? – mplungjan Mar 02 '14 at 15:13
I don't know how the OP wants to "print" the elements, which is why I allowed an arbitrary function to be supplied. The OP can provide whatever visit function the OP so desires, including one that does concatenation. – Michael Aaron Safyan Mar 02 '14 at 15:14
@Michael Aaron Safyan - hmmm doing something wrong, does not work(( – AlexShevyakov Mar 02 '14 at 15:16
@Alexander what doesn't work? – Michael Aaron Safyan Mar 02 '14 at 15:17
@Michael http://jsfiddle.net/PatrickObrian/6fvSb/ – AlexShevyakov Mar 02 '14 at 15:20
You need to invoke visitAllPrintDivs() with your print method. – Michael Aaron Safyan Mar 02 '14 at 15:20
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/48802/discussion-between-alexander-and-michael-aaron-safyan) – AlexShevyakov Mar 02 '14 at 15:35

Printing getElementsByClassName

2 Answers2