CODEWITHSUNDEEP
javascript
Nick
Nick

Reputation: 597

Display image through JavaScript function

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>

Upvotes: 0

Views: 9165

Answers (2)

user2670773
user2670773

Reputation: 37

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>

Upvotes: -2

lolol
lolol

Reputation: 4390

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.

Upvotes: 3

Related Questions