初心者のものです。
即時関数の中にappendChildを用いてHTML文を付け加えようとしているのですが、うまく表示されません。
どうして表示できないのか教えて頂けないでしょうか。
下記には、全文を記載しておりますが、
聞きたい箇所はcontainer.appendChild(card)
の箇所となります。
わかりづらくて申し訳ございませんがご回答頂きたくお願い致します。
'''
<html lang="ja"> <head> <meta charset="utf-8"> <title>Black Jack</title> </head> <style> body{ background-color:#228b22; margin-left:auto; margin-right:auto; text-align: center; } .card-container { display: inline-block; width: 50px; height: 60px; font-size: 20px; font-weight: bold; position:relative; margin:50px 20px auto 20px; perspective:100px; } .card-back,.card-front{ display: block; width:100%; height:100%; border-radius: 5px; position:absolute; backface-visibility:hidden; } .card-front{ background:#228b22; transform: rotateY(180deg); } .card-back{ background:white; color:black; } .card{ width: 100%; height: 100%; transform-style: preserve-3d; transition: transofrm .8s; } .card.open{ transform: rotateY(180deg); } </style> <body> <div class="card-container"> <div class="card"> <div class="card-back">?</div> <div class="card-front">1</div> </div> </div> <div> </body> <script> var card = document.getElementsByClassName('card'); (function(){ var cards = []; var level = 2; //カードの作成 for(var i=1;i<14;i++){ for(var j=0;j<4;j++){ cards.push(i); } } //console.log(cards); //カードを自動的に配列する function createCard(num){ var inner,card,container; inner = '*' var num = cards[num]; //console.log(num); card = document.createElement("div"); card.className = "card-front"; card.innerHTML = "*"; document.body.appendChild(card); card.innerHTML = inner.replace('*',num); __ container = document.createElement('div'); container.className = 'card'; container.appendChild(card);__ console.log(container); return; } //カードを配る 2つ function init() { for (var i = 1; i<= level;i++){ var pos = Math.floor(Math.random() * cards.length); cards.splice(pos,1); //console.log(cards.length); createCard(pos); } } init(); })(); </script> </html>'''
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。