CODEWITHSUNDEEP
javascriptfunctionimage
HackToHell
HackToHell

Reputation: 2393

Displaying an image on Javascript function call !

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

Upvotes: 1

Views: 47060

Answers (5)

Jigar Joshi
Jigar Joshi

Reputation: 240860

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

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074038

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:

Upvotes: 4

cypher
cypher

Reputation: 6992

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>

Upvotes: 0

James Allardice
James Allardice

Reputation: 165941

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.

Upvotes: 1

Raptor
Raptor

Reputation: 54212

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>

Upvotes: 1

Related Questions