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

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

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

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

Q&A

解決済

2回答

650閲覧

querySelector()の使い方がうまくいかない。

onoko

総合スコア40

JavaScript

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

0グッド

0クリップ

投稿2022/06/12 13:11

JavaScript初心者です。
Run For IT!という名前のゲームを作っています。各人が順番で一度に6個のサイコロを振り、1の目から連続して並んだ目がでれば、そのサイコロ1個につき5点とし、一番さきに合計点が100点に達したものが勝ちとなる遊戯のパソコンゲーム版です。
以下のコードは全体のゲームのうち各参加者の名前の下に得点のあった出目を並べてゆく部分のものです。
一階層上の<table id="score1">のなかに<tr><td>で囲み横にそろえた6つのサイコロの<img>を上から下に並べようとしています。
alertを使ってデバッグしています。しかしコード中ほどの alert('td='+td);がnullとなってしまい先に進みません。
その直前の行の document.querySelector('#id'); のどこが悪いのかわかりません。
まだ命令に不慣れな状態で稚拙な誤りにさぞ辟易されるかもしれないと存じておりますが、どうか解決法を御教授くださいますようお願いします。

JavaScript

1コード 2//出た目に得点があったらその賽の目の画像をその競技者の下に表示する。 3 if (point>0){ 4 alert('point='+point); 5 let score1 = document.querySelector('#score1'); 6 let tr = document.createElement('tr'); 7 q++; 8 let str = 'td' + q; 9 alert('str='+str); 10 tr.innerHTML = '<td id="td"></td>'; 11 let td = document.querySelector('#td'); 12 alert('td='+td); 13 td.setAttribute('id',str); 14 alert('tr.innerHTML='+tr.innerHTML); 15 for(let n=0;n<6;n++){ 16 let rollImage = document.createElement('img'); 17 rollImage.setAttribute('src',album[roll[n]-1].src); 18 rollImage.setAttribute('alt',album[roll[n]-1].msg); 19 td.insertBefore(rollImage,null); 20 } 21 score1.appendChild('tr'); 22 } 23 24 ```

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

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

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

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

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

guest

回答2

0

javascript

1let td = document.querySelector('#td');

の実行時点で、変数 tr の要素はcreateElementされただけで
html内のどこにも追加されていません。

要素がhtml上にないため、 document.querySelector('#td'); で見つけられない状態になっています。

投稿2022/06/12 20:51

Eggpan

総合スコア2665

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

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

0

ベストアンサー

js

1 let tr = document.createElement('tr'); 2 ... 3 tr.innerHTML = '<td id="td"></td>'; 4 let td = document.querySelector('#td'); 5 ... 6 score1.appendChild('tr');

document.querySelector()documen.getElementById() は、document から辿れるツリーにある要素だけを対象に検索します。もし score1 がすでにツリーに入っているとすると、score1.appendChild('tr')document.querySelector() よりも前に実行すべきです。

もし score1 がツリーに入っていないなら、まずはそこを解決する必要があります。

投稿2022/06/12 17:04

int32_t

総合スコア20672

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問