document.querySelectorの引数にオブジェクト内のデータを使いたい

ライブラリみたいに作ろうとしたら、早速つまづいてしまいました

コード

HTML
1<html>
2
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="index.css">
6</head>
7
8<body>
9
10  <script src="index.js" charset="utf-8"></script>
11
12  <div class="testElm">
13  </div>
14
15</body>
16
17</html>

CSS
1.testElm{
2  width:200px;
3  height:100px;
4  background-color:"black";
5}

JS
1
2function test(x){
3
4　　console.log(x.el);
5　　//test1だと、.testElmと表示されている
6
7　　let el = document.querySelector(x.el);
8　　//エラーは出ない
9
10　　console.log(el);
11　　//null
12
13　　el.style.backgroundColor = x.color;
14　　//TypeError: null is not an object (evaluating 'el.style')
15
16}
17
18test1 = new test({
19　　el:".testElm",
20　　color:"red"
21)}

試したこと

el = document.querySelector(x.el); を
el = document.querySelector(CSS.escape(x.el));

el:".testElm"を
el:"testEml"にして
el = document.querySelector(x.el);を
el = document.querySelector("." + x.el);
にしてクラスを指定する.(ドット)を関数側に出した
(idを使うかもしれないのであまりやりたくないです)

kei344

2021/09/26 14:32

（質問文は編集できます）HTMLも提示しましょう。

int32_t

2021/09/26 14:42

elがnullということは、「.testElmのdiv要素を作成済」というのが疑わしいです。問題を再現できる完全なHTMLとJavaScriptを開示してください。

退会済みユーザー

2021/09/26 14:44

解決しました。まさかHTML側じゃないだろうとタカを括っていたら、よくあるdefer抜けでした。恥ずかしい限りです。

行動規範の内容に同意します

回答2件

JavaScript実行時点で要素が無いからでは。

HTML
1  <script src="index.js" charset="utf-8"></script>
2
3  <div class="testElm">
4  </div>
5```↓
6```HTML
7  <div class="testElm">
8  </div>
9  <script src="index.js" charset="utf-8"></script>