More then one event in an onclick print event

Question

I have an onclick print event, its working fine but now i have some div's i want to print out, so my question is, how can i make this script working with all id="PrintElement" Or id="PrintElement1" / id="PrintElement2" and so on, so i can add the ID to the div's i want to print out on one paper.

I have this Javascript, thats work with One div called id="PrintElement".

  <script type="text/javascript">
    //Simple wrapper to pass a jQuery object to your new window
    function PrintElement(elem){
        Popup($(elem).html());
    }

    //Creates a new window and populates it with your content
    function Popup(data) {
        //Create your new window
        var w = window.open('', 'Print', 'height=400,width=600');
        w.document.write('<html><head><title>Print</title>');
        //Include your stylesheet (optional)
        w.document.write('<link rel="stylesheet" href="add/css/layout.css" type="text/css" />');
        w.document.write('<link rel="stylesheet" href="add/css/main.css" type="text/css" />');
        w.document.write('</head><body>');
        //Write your content
        w.document.write(data);
        w.document.write('</body></html>');
        w.print();
        w.close();

        return true;
    }
  </script>

Then i have a div

<div id="PrintElement">
 SOME CODE.....SHORT/LONG
</div>

And to activate the function i have

<a onclick="PrintElement('#PrintElement')">Print</a>

Working fine now i just want it to work with more then one div called id="PrintElement" or if easier i can call the divs ID PrintElement and a number... so it just print out the div's with the ID's

<div id="PrintElement">
 SOME CODE.....SHORT/LONG
</div>
<div>
 SOME CODE.....SHORT/LONG
</div>
<div id="PrintElement">
 SOME CODE.....SHORT/LONG
</div>
<div>
 SOME CODE.....SHORT/LONG
     <div id="PrintElement">
       SOME CODE.....SHORT/LONG
     </div>
     <div>
      SOME CODE.....SHORT/LONG
     </div>
</div>

Hope u understand..

what library are you using jQuery or Prototype? – Pow-Ian Dec 19 '13 at 20:24 — Pow-Ian, Dec 19 '13 at 20:24
hmm im new to this but normally jQuery. – Thomas BP Dec 19 '13 at 20:26 — Thomas BP, Dec 19 '13 at 20:26

Vincent Audebert · Accepted Answer · 2013-12-19T20:37:42.877

You should replace id="PrintElement" with class="PrintElement" in your HTML

And then change your <a onclick="PrintElement('#PrintElement')">Print</a> with <a onclick="PrintElement('.PrintElement')">Print</a>

And then:

function PrintElement(elem){
    $(elem).each(function() {
        Popup($(this).html());  
    });
}

This will open a new window for every PrintElement though...

You can collect data with a var and then call Popup at the end of the loop.

EDIT: The code above is using jQuery... so you'll need the library.

EDIT2: If you want to collect data and open only one popup

function PrintElement(elem){
    var data = '';
    $(elem).each(function() {
        data = data + $(this).html();
    });
    Popup(data);  
}

Thx. for a great code not to much edit and it works like i want, THX alot ;-) — Thomas BP, Dec 19 '13 at 20:49

salezica · Answer 2 · 2013-12-19T20:34:34.083

Without jQuery, first move the code that enumerates target IDs to a function, don't embed it in the HTML:

<a onclick="PrintElements()">Print</a>

And in JS:

function PrintElements() {
    printElement('#PrintElement1')
    printElement('#PrintElement2')
}

There's a better approach, however. You can use classes (<div class="PrintElement">) in your HTML to mark print targets and then pick them up from PrintElements using document.getElementsByClassName.

function PrintElements() {
    targets = document.getElementsByClassName('PritnElement')

    [].forEach.call(targets, function(x) {
        PrintElement(x)
    })
}

Thx. for a great code but im using Vincent ShowcaseWork.. but THX alot ;-) — Thomas BP, Dec 19 '13 at 20:48

More then one event in an onclick print event

2 Answers2

Linked