javascript script innerhtml

Question

hi i want to call function changeDivHTML which pass the image

   <a href="javascript:void(0)" onclick="changeDivHTML(<img src='.DIR_WS_IMAGES .$addimages_images[$item]['popimage'].'>)">

and the function add this images to particular id's div.

function is this

 <script language="javascript" type="text/javascript">
                    function changeDivHTML(item)
                    {
                    alert(item);
                        previousInnerHTML = 'item';
                        alert(previousInnerHTML);
                        document.getElementById('image').innerHTML = previousInnerHTML;
                     }
</script>

but when i click on images browser showas the javascript error.

Error: invalid XML attribute value
Source File: http://xxx.xxx.xxx.xxx:xxx/product_info.php?products_id=31
Line: 1, Column: 23
Source Code:
changeDivHTML(<img src=images/products/top/product_big1.jpg>)

plsease help how to remove this error.

Answer 1

Pass it a string (i.e. something surrounded by quote marks), rather then some invalid E4X

Answer 2

changeDivHTML requires that you pass a string to it, but you forgot the delimiters which is what's causing the errors.

<a href="javascript:void(0)" onclick="changeDivHTML('<img src=\''.DIR_WS_IMAGES .$addimages_images[$item]['popimage'].'\'>')">

Answer 3

Try is by passing the parameter as string, as below

<a href="javascript:void(0)" onclick="changeDivHTML('<img src='.DIR_WS_IMAGES .$addimages_images[$item]['popimage'].'>')">

Don't forget to handle escape characters.

Answer 4

First you must pass as a string, not as tag! And, you must close it at the end.

<a href="javascript:void(0)" onclick="changeDivHTML(\"<img src='.DIR_WS_IMAGES .$addimages_images[$item]['popimage'].'/>\")">

Second, you should change script like this, so you get the image tag where you want:

<script language="javascript" type="text/javascript">
                    function changeDivHTML(item)
                    {                        
                        previousInnerHTML = item;
                        document.getElementById('image').innerHTML = previousInnerHTML;
                     }
</script>

Hope I helped. =)

Answer 5

I'm guessing that you're trying to change the inner HTML of a DIV to some other content when clicking a link is pressed. It's easier to refer to some other HTML already in the document (possibly concealed by style="display:none" if it must be hidden initially). Here's an example:

<div id="div1">Here's div1 <img src="1.png"/></div>
<div id="div2">Here's div2.</div>
<a href="#" onclick="changeDivHtml('div1', 'div2')">Click to Change</a>
<script language="javascript">
  function changeDivHtml(source, target) {
    var elSource = document.getElementById(source)
      , elTarget = document.getElementById(target);
    elTarget.innerHTML = elSource.innerHTML;
  }
</script>