images

body append

[WilliamGatesman]

Hi.

I can get the backs of the cards of this game to display when I comment out the body append line. I don't know if there is a src tag wrong for the cards array which is all of the fronts of the cards or if the body append line is wrong.

Could someone help with this? It works on the computer of my friend who sent it to me. We are trying to finish it.

Thanks.

const SIZE = 52;
  const PAIR = 2;
  const SUITS = new Array('Spade', 'Heart', 'Diamond', 'Club'); 
    
 var cards = new Array();
 var back = new Image(50,75);

 back.src = 'images/back.gif';
 var cellNumber = new Array();
 var randomCards = new Array();
 var starter = -1;

    // loading images
    back = '<img src = "images/back.gif" width=40 height=60>';

    for(i=0; i<SIZE; i++){
     var card = new Image(50,75);
     card.src = '/Documents/images/' + i + '.png';
     card = "<img src =" + 'images' + i + '.png ' + "width=40 height=60>";
     cards.push(card);
     //document.body.appendChild(cards[i]);
    } 
    // creating a table
   document.writeln("<table border=2 align= center>"); 
   for(i=0; i<4; i++){   
     document.writeln("<tr>");

     for(j=0; j<13; j++){ 
      document.writeln("<td>");
      cellNumber.id = j+i*13;
      document.writeln(cellNumber.id + back + cards[starter=starter+1]);
      document.writeln("</td>");
     }
      document.writeln("</tr>");
    }
    console.log(cards);


//document.write("hi");
//document.write("<img src=\"" + "images/back" + ".gif\">");

[tangor]

@WilliamGatesman ... don't play cards ... but I did want to welcome you to Webmasterworld AND bump this message up so others might see it ... those who might help. :)

[WilliamGatesman]

Thanks tangor. Once the fronts of the cards can be shown then I can start to learn how write functions like shuffling.

[not2easy]

The only thing I spotted in there that seems iffy is this line:

card = "<img src =" + 'images' + i + '.png ' + "width=40 height=60>";

It appears to have an extra space after '.png' and the quote pairs are not matched.

PS - I don't write js but the rest of the html type lines don't have those features.

[ClosedForLunch]

card = "<img src =" + 'images' + i + '.png ' + "width=40 height=60>";

You likely need a / after images

The space after png is correct, but probably best to remove the space after src

The back of your card is a gif, but the front is a png. Is that correct?

[NickMNS]

The line that not2easy suggests is suspect appears in fact to be suspect, but not for the reason he raises. I think you have an issue regarding your use of quotes. Why is 'images' quoted with single quotes and added to "img src =" ? Is 'images' really a string or is that a typo and images is a variable?

As a string the line should look like this:

card = "<img src=images" + i + ".png width=40 height=60>";

As a var the line should look like this:

card = "<img src=" + images + i + ".png width=40 height=60>";

Note if it is a var, there is no images var declared.

I addition I would like to make a suggestions.

Using document.write will likely cause your browser console to throw warnings. TL-DR It can slow your page down. For the full story see here:
[stackoverflow.com...]

You can use a command like appendChild or insertBefore to add the content. In your specific case (for the table) I would first create the new table using createElement, adding all the required tags and styles to that newly created element and then appending it to the page. See more details and a good example here:
[developer.mozilla.org...]

[ClosedForLunch]

Is 'images' really a string or is that a typo and images is a variable?

It seems that 'images' is a directory. If so, it needs a /

example:

src=images/

[WilliamGatesman]

Thanks. I did take out the spaces and make the quotes consistent and add a backspace after images. I will need to learn about how appendChild works.

Yes, all of the fronts of the cards are .png but the back is .gif.

I have noticed the pages are slow but hadn't known it was because of document.write so I will try to not use them for images.

The images work for my friend on his computer even though a variable for images was not created.