質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

8992閲覧

appendChildで生成した文が表示されない。

jesushill

総合スコア37

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/03/11 08:02

初心者のものです。
即時関数の中に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>

'''

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

getElementsByClassNameなので、nodelistが返ってきてるのでは?
試しにcard[0].appendChildでやるとどうなります?

投稿2016/03/11 09:13

tkturbo

総合スコア5572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

appendChildが逆じゃないですか?

Javascript

1card.appendChild(container);

空の要素にcardをappendChildしても無駄ですよね?
https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild

投稿2016/03/11 08:13

shi_ue

総合スコア4437

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jesushill

2016/03/11 08:22

回答ありがとうございます。 回答頂きましたcardとcontainerを逆にして実行してみましたが、 結果は変わりませんでした。念のため、console.log(card)で確認したところ、 生成はされているようなのですが・・・
shi_ue

2016/03/11 08:34 編集

一番下にdiv要素が二つ追加されていますが、そうじゃなくて? bodyにappendしてるので、一番下です。 ちなみに、こんな感じです。 <div class="card-front">7<div class="card"></div></div>
guest

0

ベストアンサー

container の中に card を追加していますが、 container は createCard 関数の中で作られてそのまま関数が終わると同時に消えてしまってるように見えます

container を return したり、 container を外側のスコープに作るなどしないとダメかと思います

あと markdown は ' じゃなくて ` です
シフトキー押しながら @ マークで出せます

投稿2016/03/11 08:10

ryls-nmm

総合スコア633

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jesushill

2016/03/11 08:28

回答頂きましてありがとうございます。 containerをreturnしたのですが、うまく表示されませんでした。 一つ質問ですが、コメントにあるcontainerを外側のスコープに作るとは、 即時関数の中にcontainerを移動するということでしょうか?
ryls-nmm

2016/03/11 08:38 編集

HTMLとしてどのような構造にしたいのでしょうか? `var inner,card,container;` の container と `container = document.createElement('div'); ` を `var level = 2;` の下に移動すれば ひとつの container にすべてのカードが入る事になります 最後にその container を見える場所に設定しないといけないです document.body に appendChild している箇所がありますが、その後に 別のところに appendChild しているので body へ追加はされていません body にいきなり追加したいなら init 中の最後に `document.body.appendChild(container)` とすればできます
jesushill

2016/03/12 07:21

ありがとうございます。createCardの関数の中にbodyにappendChildを行った所、表示が出来ました。コメントにある通りcontainerを見える場所に設定されていなかったようです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問