Passing HTML string to JavaScript function

Question

I have a value that I'm currently accessing and passing to a JavaScript function through an onclick.

<a href="#" onclick="openTextWindow('<%=myVar.varDefinition.getText()%>');">Text</a>

An example value that I'd receive from the getText method is shown below.

<h1>My Header</h1><br />My text

This value is then passed to my openTextWindow method.

function openTextWindow(inText) {
    myWindow = window.open('','','width=500, height=300');
    myWindow.document.write(inText);
    myWindow.focus();
}

For some reason, the value stored in inText doesn't match the string with HTML tags that I showed above. It ends up looking like this.

"<lt/>h1<gt/>My Header<lt/>/h1<gt/><lt/>br /<gt/>My text

When inText is written to myWindow, I want that new window to render with the text My Header within a styled header and My text on a line below that. I've tried replacing and escaping characters with no luck. Any ideas on how to fix this or a better way to accomplish what I'm trying to do? Thanks!

Answer 1

You can stash your HTML in a hidden DIV or textarea, then grab that from your function instead of trying to pass it inline.

<a href="#" onclick="openTextWindow('DIV1');">Text</a>
<div id="DIV1" style="display:none"><%=myVar.varDefinition.getText()%></div>

JS:

function openTextWindow(divName) {
    var inText = document.getElemenyById(divName).innerHTML;
    myWindow = window.open('','','width=500, height=300');
    myWindow.document.write(inText);
    myWindow.focus();
}