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" />"); 

Answer 1

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)