Q&A
お二人ともありがとうございました！
前提
javascriptで神経衰弱の勉強をしていますが、準備した画像が表示されません。デベロッパーツールにエラーなし、同じく指しているpngは正常に取得できている様子。
実現したいこと
ここに実現したいことを箇条書きで書いてください。
画像表示をさせたい
理由が知りたい
発生している問題・エラーメッセージ
該当のソースコード
javascript
1 2 3 // 全てのカード情報を入れる配列 4 const cards = []; 5 6 // カテゴリ 7 const suits = ["A","B","C","D",]; 8 9 // オブジェクト作成 10 function Card(suit, num) { 11 this.suit = suit; 12 this.num = num; 13 this.front = `${this.suit}${('0'+this.num).slice(-2)}.png`; 14} 15 16 // カード情報を配列に格納 17 for (let i = 0; i < suits.length; i++) { 18 for (let j = 1; j <= 5; j++) { 19 let card = new Card(suits[i], j); 20 cards.push(card); 21 console.log(card) 22 } 23 } 24 25 26 const table = document.querySelector(".table"); 27 28 // シャッフルする関数 29 function shuffle(arrays) { 30 const array = arrays.slice(); 31 for (let i = array.length - 1; i >= 0; i--) { 32 const randomIndex = Math.floor(Math.random() * (i + 1)); 33 [array[i], array[randomIndex]] = [array[randomIndex], array[i]]; 34 } 35 return array; 36 } 37 38 function shuffleCard() { 39 const shuffled = shuffle(cards); 40 for (let i = 0; i < suits.length; i++) { 41 const tr = document.createElement("tr"); 42 table.appendChild(tr); 43 for (let j = 0; j < 5; j++) { 44 const td = document.createElement("td"); 45 td.style.backgroundImage = `url(img/${shuffled[i * 5 + j].front})`; 46 tr.appendChild(td); 47 } 48 } 49 } 50 shuffleCard();
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script src="izumo.js" defer></script> 8 <title>チャレンジ</title> 9</head> 10<body> 11 <table class="table" border="1"></table> 12 13</body> 14</html>
試したこと
画像のリネーム等
よろしくお願いします。
回答2件
2
js
1 const td = document.createElement("td"); 2 td.style.backgroundImage = `url(img/${shuffled[i * 5 + j].front})`; 3 tr.appendChild(td);
<td> に子ノードがないと、サイズが 0x0 になって見えないでしょう。
CSSで<td> に大きさを与えるか、<td>の子として<img> を入れて、<img> で画像を表示するのはどうでしょうか。
投稿2022/09/07 02:46
総合スコア17892
2
ベストアンサー
tdに高さや幅が設定されていないからだと思います。
tdは高さ、幅の設定がない場合、内部の要素の大きさになります。
ご掲示の問題では、取得した画像をtdの背景画像としているため、内容の要素が無く、
tdの高さ、幅が最小になっているため、表示されていないのではないでしょうか。
tdの高さ、幅を設定してみてください。
投稿2022/09/07 02:45
編集2022/09/07 02:45
総合スコア1000
回答へのコメント
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。