/    Sign up×
Community /Pin to ProfileBookmark

Getting 2 getElementById at the same time

Copy linkTweet thisAlerts:
Sep 01.2011

I am trying to only print 2 divs on a page

[code=html] <div id=”directions-panel”></div> [/code]

and

[CODE] <div id=”map_canvas”></div> [/CODE]

i am using this little bit of javascript

[CODE]function printSelection(node){
var content=node.innerHTML
var pwin=window.open(”,’print_content’,’width=100,height=100′);
pwin.document.open();
pwin.document.write(‘<html><body onload=”window.print()”>’+content+'</body></html>’);
pwin.document.close();

}

[/CODE]

and the html is

[code=html]<a href=”” onclick=”printSelection(document.getElementById(‘directions-panel’));return false”>print</a>
[/code]

the problem is i can only print the one

[CODE]document.getElementById(‘directions-panel’));return false”[/CODE]

how would i get both to print at the same time?

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@Logic_AliSep 01.2011 — Completely untested. If it "doesn't work", post the output of the error console:
function printSelection()
{
var content = "",
args = printSelection.arguments,
pwin;

for( var i = 0; args[ i ]; i++ )
content += document.getElementById( args[ i ] ).innerHTML + '&lt;p&gt;';

pwin = window.open('','print_content','width=100,height=100');

pwin.document.open();
pwin.document.write('&lt;html&gt;&lt;body onload="window.print()"&gt;'+content+'&lt;/body&gt;&lt;/html&gt;');
pwin.document.close();
}

<i> </i>[code=html]<a href="#" onclick="printSelection( 'directions-panel', 'map_canvas');return false">print</a>
[/code]
Copy linkTweet thisAlerts:
@webevelopersFTWauthorSep 02.2011 — No errors from the firebug console, however it only printed the map_canvas

div. :-(
Copy linkTweet thisAlerts:
@aj_nscSep 02.2011 — That's because Logic All fell into the closure trap.

<i>
</i>function printSelection()
{
var content = "",
args = printSelection.arguments,
pwin;

for( var i = 0; args[ i ]; i++ ) {
closure = function(num) {
content += document.getElementById( args[ num ] ).innerHTML + '&lt;p&gt;';
}(i);
}

pwin = window.open('','print_content','width=100,height=100');

pwin.document.open();
pwin.document.write('&lt;html&gt;&lt;body onload="window.print()"&gt;'+content+'&lt;/body&gt;&lt;/html&gt;');
pwin.document.close();
}
Copy linkTweet thisAlerts:
@Logic_AliSep 02.2011 — No errors from the firebug console, however it only printed the map_canvas

div. :-([/quote]
Did the expected content appear in the new window?
Copy linkTweet thisAlerts:
@webevelopersFTWauthorSep 02.2011 — Did the expected content appear in the new window?[/QUOTE]

No, only the map canvas div is in the new window :-(
Copy linkTweet thisAlerts:
@Logic_AliSep 02.2011 — No, only the map canvas div is in the new window :-([/quote]This technique prints the content of the div without its styling applied. You could try wrapping each div in its own container and specifying the IDs of the containers.

Alternatively you could try this replacement function, called in the same way as before. Instead of opening a new window, it hides everything except what you want to print. I'm not sure what the result will be, it may still print the whole page.
function printSelection()
{
var args = printSelection.arguments,
printElems = [],
allElems = document.body.getElementsByTagName( '*' );

for( var i = 0; args[ i ]; i++ )
printElems.push( document.getElementById( args[ i ] ) );

for( var i = 0; allElems[ i ]; i++ ) <br/>
allElems[ i ].style.display = 'none';

for( var i = 0; printElems[ i ]; i++ )
printElems[ i ].style.display = '' ;

window.print();

for( var i = 0, el; el = allElems[ i ]; i++ ) <br/>
allElems[ i ].style.display = '';
}
×

Success!

Help @webevelopersFTW spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...