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.

Andy E · Accepted Answer · 2010-05-14 11:20:01Z

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'].'\'>')">

answered May 14, 2010 at 11:20

Andy E

346k86 gold badges482 silver badges452 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cipi · Accepted Answer · 2010-05-14 11:25:17Z

2

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. =)

answered May 14, 2010 at 11:25

Cipi

11.4k9 gold badges50 silver badges60 bronze badges

1 Comment

Andy E Over a year ago

Actually, your first example will not work because HTML attributes do not have an escape character. For instance, you cannot have onclick="str = \"I'm a string\"", because HTML parsers will end the attribute at the first \", regardless of the escape character.

MUS · Accepted Answer · 2010-05-14 11:21:25Z

1

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.

answered May 14, 2010 at 11:21

MUS

1,4504 gold badges17 silver badges30 bronze badges

Comments

Quentin · Accepted Answer · 2010-05-14 11:19:39Z

0

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

answered May 14, 2010 at 11:19

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

maerics · Accepted Answer · 2010-05-14 11:26:40Z

0

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>

answered May 14, 2010 at 11:26

maerics

157k47 gold badges277 silver badges299 bronze badges

Collectives™ on Stack Overflow

javascript script innerhtml

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related