Displaying an image on Javascript function call !

Question

I am a javascript noob and I need help with this problem !

On a specific condition a function is called and when it is called , I want an image to be displayed ! How do I do that ? this is not working!

<script type="text/javascript">
function _enabled() {
document.write("<img border="0" src="http://4.bp.blogspot.com/-C4vvMEB9MyI/TfW0lduV2NI/AAAAAAAAAZc/N7HL1pUusGw/s1600/some image.png" />");
}

var r =true;
</script>

This is not working , I get this error

Error: missing ) after argument list
Source File: file:///C:/Users/Gowtham/Desktop/new%20%202.html
Line: 5, Column: 33
Source Code:
document.write("<img border="0" src="http://4.bp.blogspot.com/-C4vvMEB9MyI/TfW0lduV2NI/AAAAAAAAAZc/N7HL1pUusGw/s1600/sjs.png" />");

T.J. Crowder · Accepted Answer · 2011-06-13 07:28:31Z

4

The syntax error is that you're using double quotes for your document.write string literal, but you've also used a double quotes your HTML attributes:

document.write("<img border="0" src="http://4.bp.blogspot.com/-C4vvMEB9MyI/TfW0lduV2NI/AAAAAAAAAZc/N7HL1pUusGw/s1600/some image.png" />");
//                          ^--- here and other places

That double quote ends the string literal, so you get a syntax error. You'd want to escape that with a backslash, or use JavaScript's handy feature where you can use single quotes around string literals.

But that alone isn't going to solve the problem. If you call document.write after the main parsing of the page is finished, you're going to completely erase the page and replace it with new content.

To display an image after the main parsing of the page is complete, you create a new img element via the DOM document.createElement function and then append it to the element in which you want it to appear. For instance, this code puts a new image at the end of the document:

function addTheImage() {
    var img = document.createElement('img');
    img.src = "http://....";
    document.body.appendChild(img);
}

To add to another element, rather than the end of body, you just need to get a reference to the element. There are various ways to do that, including document.getElementById to look it up by its id value, document.getElementsByTagName to look up all elements with a given tag, etc. Some browsers offer very rich methods like querySelectorAll that let you use CSS selectors, but not all do yet. (Many JavaScript libraries like jQuery, Prototype, YUI, Closure, or any of several others plug that gap for you, though, and offer other handy utility features, and features smoothing over browser inconsistencies and outright browser bugs.)

More about the dom:

The DOM2 Core specification (widely supported by major browsers)
The DOM2 HTML specification (DOM stuff specific to HTML, also fairly widely supported)
The DOM3 Core specificiation (less widely supported, but things are improving)

answered Jun 13, 2011 at 7:28

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

HackToHell Over a year ago

I did know about document.createElement but it is a big task and I want the image in a particular postion only . That's for advanced guys not for noobs :)

Raptor Over a year ago

You should start learning JavaScript. createElement thing is commonly used when generating contents in page using JavaScript.

Raptor · Accepted Answer · 2011-06-13 07:23:58Z

1

Escape your document.write codes.

<script type="text/javascript">
function _enabled() {
document.write("<img border=\"0\" src=\"http://4.bp.blogspot.com/-C4vvMEB9MyI/TfW0lduV2NI/AAAAAAAAAZc/N7HL1pUusGw/s1600/some%20image.png\" />");
}

var r =true;
</script>

answered Jun 13, 2011 at 7:23

Raptor

54.4k47 gold badges254 silver badges405 bronze badges

2 Comments

Raptor Over a year ago

it depends what other codes you have. This code piece will not clear your page & the function is not called as well.

HackToHell Over a year ago

actually the document.write is nested !

James Allardice · Accepted Answer · 2011-06-13 07:24:03Z

1

You need to escape your quote marks, or use single quote marks inside the string passed to document.write. For example "<img border=\"0\"... or <img border='0'...

At the moment, your string ends at the start of your first attribute.

answered Jun 13, 2011 at 7:24

James Allardice

166k22 gold badges335 silver badges316 bronze badges

Comments

Jigar Joshi · Accepted Answer · 2011-06-13 07:39:07Z

1

<script type="text/javascript">
  function _enabled() {
    document.write("<img border='0' src='http://4.bp.blogspot.com/-    C4vvMEB9MyI/TfW0lduV2NI/AAAAAAAAAZc/N7HL1pUusGw/s1600/some image.png' />");
   }

  var r =true;
</script>

Note: Single quotes.

Tested works fine.

edited Jun 13, 2011 at 7:39

answered Jun 13, 2011 at 7:23

Jigar Joshi

241k42 gold badges409 silver badges446 bronze badges

2 Comments

cypher Over a year ago

Note the double quote near "border" :-)

Jigar Joshi Over a year ago

@cypher yes.. @Hack tested in chrome latest,FF4 , works smoothly

cypher · Accepted Answer · 2011-06-13 07:25:23Z

0

You either need to escape quotes or use single quotes for javascript and double for html (for example).

<script type="text/javascript">
    function _enabled() {
        document.write('<img border="0" src="http://4.bp.blogspot.com/-C4vvMEB9MyI/TfW0lduV2NI/AAAAAAAAAZc/N7HL1pUusGw/s1600/some image.png" />');
    }

    var r =true;
</script>

answered Jun 13, 2011 at 7:25

cypher

7,0024 gold badges34 silver badges48 bronze badges

Collectives™ on Stack Overflow

Displaying an image on Javascript function call !

5 Answers 5

2 Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related