Display image through JavaScript function

Question

I'm writing a javascript function that basically flips the coin and I'm trying to get it to return image but so far no luck. I use img src tags to assign value to a variable but somehow I suspect that does not work and I wanted to check with you guys on how this is actually done?

Here is my code:

<script type = text/javascript>

        var headsCount = 0;
        var tailsCount = 0;     

        function start()
        {
            var buttonTwo = document.getElementById("coinButton");
            buttonTwo.addEventListener("click", coinResult, false);
        }

        function flip()
        {
            var faceValue = Math.floor((Math.random()*2)+1);                

            if (faceValue == 1)
            {
                headsCount++;
                return true; 
            }
            else
            {
                tailsCount++;
                return false; 
            }
        }

        function coinResult()
        {
            var result = document.getElementById("coinToss");
            var coinCount = document.getElementById("countNumber");

            <img name = "Heads" src = "images/Heads.png" />

            if (flip() == true)
            {
                result.innerHTML = <img src = "images/Heads.png" alt = "Heads" />
            }
            else
            {
                result.innerHTML = <img src = "images/Tails.png" alt = "Tails" />
            }

            coinCount.innerHTML = "Heads Count: " + headsCount + " Tails Count: " + tailsCount;

        }

        window.addEventListener("load", start, false);

    </script>

Can you put the complete code in a JSFiddle including your HTML or at least post the rest here too? — marekful
– marekful, Commented Feb 14, 2013 at 15:04
There is so much to explain... Please, read some basic tutorials... — Michael Sazonov
– Michael Sazonov, Commented Feb 14, 2013 at 15:04
result.innerHTML = "..." this must be quoted. Why not alter img.src directly instead of trying to create new <img>s? — marekful
– marekful, Commented Feb 14, 2013 at 15:05
@MarcellFülöp the guys is writing html tags in the script. — Michael Sazonov
– Michael Sazonov, Commented Feb 14, 2013 at 15:09

lolol · Accepted Answer · 2013-02-14 15:08:07Z

3

The innerHTML property must receive a string that represents your html, so:

result.innerHTML = "<img src='images/heads.png' alt='heads' />";

If you want to use quotes instead of single quotes in your html (yes you can, and some people prefer it), you have to escape the quotes (by adding a backslash before it) so the javascript engine can understand that the quotes are text and not marking the start or the end of a string, like:

result.innerHTML = "<img src=\"images/heads.png\" alt=\"heads\" />";

PS: I'm considering your coinToss element as a div.

answered Feb 14, 2013 at 15:08

lolol

4,4203 gold badges39 silver badges55 bronze badges

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

8 Comments

marekful Over a year ago

Note, that single quote ' and apostrophe ` is not the same. Apostrophe are not valid for quoting.

Nick Over a year ago

No, its part of the javascript function and now i realize you can't use html tags inside it. How else would I upload the image then?

lolol Over a year ago

@Nick I can't understand what you meant. Upload what? What are you talking about?

Nick Over a year ago

Simple really. When my function executes it either shows one image or the other. My question is how do you link image in javascript.

lolol Over a year ago

There are two ways, or you create (in the html or php or aspx or whatever file you use) a img element and set the img element src property to the image path, or you create a div element and add a img element to the div element.

|

user2670773 · Accepted Answer · 2013-08-10 18:22:44Z

-2

the result lines certainly need quotes " and ', and escaping by /

result.innerHTML = "<img src = 'images/\Heads.png' alt = 'Heads' />"

or use the .src and .alt to just reload the img:

<html>
<head>
<script type=text/javascript>

function addEventtoButton(){
var element = document.getElementById('testing');
element.onclick = function coinResult () {
var a;
a = document.getElementById("coin");
if (false) {                        // or set if to true, or flip() as in original example
a.src='images/\Heads.png';
a.alt='Heads';          
} else {
a.src='images/\Tails.png';
a.alt='Tails';          
} };
}

</script>
</head>
<body onload='addEventtoButton()'>
<button id='testing'>testme</button>
<img name='coin' id='coin' src='images\Heads.jpg'>
</body>
</html>

answered Aug 10, 2013 at 18:22

user2670773

372 bronze badges

1 Comment

Felix Kling Over a year ago

First of all, the other (much older) answer already pointed out the problem with the quotation marks. And second, what's with the "escaping by /"? 'images/\Heads.png' actually results in 'images/Heads.png' because \H is not a valid escape sequence. So what's the point?

Collectives™ on Stack Overflow

Display image through JavaScript function

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related