Search code examples
javascripthtmlstringouterhtml

Javascript OuterHTML: How to work with a string literal?

First some HTML code:

<div id="content_4" class="content" style="background:url(pic1.gif)"></div>
<div id="content_4_a" class="content" style="background:url(pic2.gif);
    display:none"></div>

This is the JS code:

function getOuterHMTL(element){
    return element.outerHTML;
}

function switchDisplayOuter(elementToHide, elementToShow, stringly){
    document.getElementsByName(elementToShow).outerHTML=stringly;
    document.getElementById(elementToHide).style.display="none";
    document.getElementsByName(elementToShow)[0].style.display="";
}

Now this HTML code works (when I click on it, the div switches and the picture changes):

<area shape="rect" coords="0,252,98,337" onMouseOver="switchDisplayOuter(
    'content_4', 'content_4_a', getOuterHMTL('content_4_a) )">

But not this one:

<area shape="rect" coords="0,252,98,337" onMouseOver="switchDisplayOuter(
    'content_4', 'content_4_a', '<div id="content_4_a" class="content" 
    style="background:url(pic2.gif); display:none"></div>' )">

It only gets me an error code while debugging in Firefox:

Error: SyntaxError: unterminated string literal
'<div id=

Somebody who knows the right code without using the function getOuterHMTL(element) but with "plain" string literal?

Solution

  • You need to replace your " inside the onMouseOver attribute value with \':

    <area shape="rect" coords="0,252,98,337" onMouseOver="switchDisplayOuter('content_4', 'content_4_a', '<div id=\'content_4_a\' class=\'content\'  style=\'background:url(pic2.gif); display:none\'></div>' )">

    This is because your area tag's onMouseOver attribute's value is enclosed with ".