display image in Javascript and HTML

Question

I'm currently working on a school exercise and I can't find how to do one thing.

So I have this :

When I click on one of the case, the right image (image is a Mario picture for example) is supposed to display but the problem is that I only get the name of it. I would like to know what I have to change to be able to show the pics instead of the name.

Please, let me know what I should change in my code, I'm a beginner. Thank you very much!

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>

    <style type="text/css">
/*<![CDATA[*/
    div#memory_board{
        background:#B0C4DE;
        border:#999 1px solid;
        width:580px;
        height:580px;
        padding:0px;
        margin:45px auto;
    }
    div#memory_board > div{
        background: url(images/memoryBg.png) no-repeat;
        border:none;
        width:71px;
        height:71px;
        float:left;
        margin:35px;
        padding:0px;
        font-size:30px;
        cursor:pointer;
        text-align:center;
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
//<![CDATA[
    var user = prompt ("Benutzername eingeben und zum Starten auf OK klicken!");
    console.log("Willkommen " + user + "!");
    document.write ("Willkommen " + user + "!");    

    var memory_array = [document.getElementById('url(images/card1.png) no-repeat'),document.getElementById('url(images/card1.png) no-repeat'),document.getElementById('card2'),document.getElementById('card2'),document.getElementById('card3')document.getElementById('card3')document.getElementById('card4')document.getElementById('card4')document.getElementById('card5')document.getElementById('card5')document.getElementById('card6')document.getElementById('card6')document.getElementById('card7')document.getElementById('card7')document.getElementById('card8')document.getElementById('card8')];
    var memory_values = [];
    var memory_tile_ids = [];
    var tiles_flipped = 0;
    Array.prototype.memory_tile_shuffle = function(){
    var i = this.length, j, temp;
    while(--i > 0){
        j = Math.floor(Math.random() * (i+1));
        temp = this[j];
        this[j] = this[i];
        this[i] = temp;
    }
    }
    function newBoard(){
        tiles_flipped = 0;
        var output = '';
    memory_array.memory_tile_shuffle();
        for(var i = 0; i < memory_array.length; i++){
                output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\')"><\/div>';
        }
        document.getElementById('memory_board').innerHTML = output;
    }
    function memoryFlipTile(tile,val){
        if(tile.innerHTML == "" && memory_values.length < 2){
                tile.style.background = '#FFF';
                tile.innerHTML = val;
                if(memory_values.length == 0){
                        memory_values.push(val);
                        memory_tile_ids.push(tile.id);
                } else if(memory_values.length == 1){
                        memory_values.push(val);
                        memory_tile_ids.push(tile.id);
                        if(memory_values[0] == memory_values[1]){
                                tiles_flipped += 2;
                                // Clear both arrays
                                memory_values = [];
                memory_tile_ids = [];
                                // Check to see if the whole board is cleared
                                if(tiles_flipped == memory_array.length){
                                        alert("Toll gemacht! Neues Spielfeld wird generiert. Um fortzufahren, klicken Sie auf OK");
                                        document.getElementById('memory_board').innerHTML = "";
                                        newBoard();
                                }
                        } else {
                                function flip2Back(){
                                    // Flip the 2 tiles back over
                                    var tile_1 = document.getElementById(memory_tile_ids[0]);
                                    var tile_2 = document.getElementById(memory_tile_ids[1]);
                                    tile_1.style.background = 'url(images/memoryBg.png) no-repeat';
                    tile_1.innerHTML = "";
                                    tile_2.style.background = 'url(images/memoryBg.png) no-repeat';
                    tile_2.innerHTML = "";
                                    // Clear both arrays
                                    memory_values = [];
                    memory_tile_ids = [];
                                }
                                setTimeout(flip2Back, 700);
                        }
                }
        }
    }
    //]]>
    </script>
    <title></title>
  </head>
  <body>
    <div id="memory_board"></div><script type="text/javascript">
//<![CDATA[
    newBoard();
    //]]>
    </script>
  </body>
</html>

Oskari3000 · Accepted Answer · 2015-11-08 20:08:58Z

1

I think you need to put the url in your css inside the quotes. And if that doesn't help, use the full address instead of a relative one.

answered Nov 8, 2015 at 20:08

Oskari3000

1316 bronze badges

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

8 Comments

user3048878 Over a year ago

thank you, but it didn't work or I didn't do it the right way... Could you show me exacly what you mean? my images are in the folder image

Oskari3000 Over a year ago

The url() needs strings inside it, such as background: <code>url("images/memoryBg.png") no-repeat;</code> ....well I can't get the code block to work. But anyways, I meant that you need to put the image address inside the " quotes.

user3048878 Over a year ago

Okay I did what you asked and now something weird happened, the case are disappearing when I click on them... That is very strange.

Oskari3000 Over a year ago

Did you remember to make the " changes to all places in your code, where you're using url() ? Sounds like it is doing almost the thing that you're planning it to do, but maybe it's either the missing " or something else in the logic that causes that.

user3048878 Over a year ago

Yes, I changed everwhere but it won't work. Could you show me exacly how you would write it in the code for example for the image called "card1.png" ? Thanks!

|

Mohammad Jubayer · Accepted Answer · 2015-11-08 20:12:18Z

1

Use background: url("images/memoryBg.png") no-repeat;

instead of background: url(images/memoryBg.png) no-repeat;

answered Nov 8, 2015 at 20:12

Mohammad Jubayer

293 bronze badges

1 Comment

user3048878 Over a year ago

It didn't change anything, these images are just the backgrood, whant I want is to show some images where you can see "image1" written on my picture.. I hope I'm clear enough...

Collectives™ on Stack Overflow

display image in Javascript and HTML

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