javascript update HTML content

Question

javascript update HTML content

Hello, I am trying to call a function called changeDivHTML which passes an image.

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

This function adds the images to a specific ID's div.

The function looks like 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 the images, the browser shows a 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>)

Please help me figure out how to resolve this error.

javascript innerhtml

Answer 1

Answer №1

changeDivHTML needs to be passed a string, but you have missed out the delimiters which is leading to the errors.

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

Answer 2

changeDivHTML needs to be passed a string, but you have missed out the delimiters which is leading to the errors.

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

Answer 3

Answer №2

Make sure to pass the code as a string, not as a tag. Also, remember to close it properly at the end.

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

Additionally, modify the script in this way to ensure that you receive the image tag in the desired location:

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

Hopefully this information proves to be helpful for you. =)

Answer 4

Make sure to pass the code as a string, not as a tag. Also, remember to close it properly at the end.

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

Additionally, modify the script in this way to ensure that you receive the image tag in the desired location:

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

Hopefully this information proves to be helpful for you. =)

Answer 5

Answer №3

One way to approach this is by sending the parameter as a string, like shown in the example below:

<a href="javascript:void(0)" onclick="updateContent('<img src='.BASE_IMAGE_PATH .$gallery_images[$index]['image_name'].'>')">

Remember to properly handle escape characters for security purposes.

Answer 6

One way to approach this is by sending the parameter as a string, like shown in the example below:

<a href="javascript:void(0)" onclick="updateContent('<img src='.BASE_IMAGE_PATH .$gallery_images[$index]['image_name'].'>')">

Remember to properly handle escape characters for security purposes.

Answer 7

Answer №4

To utilize this function, input a string (such as text enclosed in quotation marks) instead of using an invalid E4X

Answer 8

To utilize this function, input a string (such as text enclosed in quotation marks) instead of using an invalid E4X

Answer 9

Answer №5

If you're looking to update the content of a DIV with new content when clicking a link, it's best to reference existing HTML within the document (which may be hidden initially using style="display:none"). Here's an illustration:

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

Answer 10

If you're looking to update the content of a DIV with new content when clicking a link, it's best to reference existing HTML within the document (which may be hidden initially using style="display:none"). Here's an illustration:

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

javascript update HTML content

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Navigating through complex immutable entities

Mastering card sliding and spacing in React NativeLearn how to effortlessly slide cards horizontally in your React

Changing the image's flex-grow property will take precedence over the flex settings of other child

Searching for a specific match in JSON data using React streaming technology: encountering issues with the .find method as

Is it possible to display two separate pieces of content in two separate divs simultaneously?

Using optional arguments in my AngularJS controller.js

Tips for refreshing a webpage after switching screens

Techniques for capturing Django's output from an Ajax request

providing text responses rather than numerical values

Add a plethora of images to the canvas

Creating aliases for a getter/setter function within a JavaScript class

I have a json file that I need to convert to a csv format

The Discord.js collector seems to have no intention of ending, completely disregarding its keys in order

Steps to display content post authentication using JWT

Adjust the TextArea content according to the quantity of selections made in the listbox

calls to res.send and res.render

Executing php class method through ajax with jQuery without requiring a php handler file

Hacking through external script injections into the browser

Facing issue with local redis session not functioning as intended

Positioning of Cloned Element in jQuery