javascriptのlibraryをつくっているときのエラー

チェーンメソッドを使ってjqueryのようなJSlibraryをつくっています
そこでエラーが出てその周辺をいろいろとしてみましたがよくわかりません。
何か教えていただけると幸いです。

index.html

html
1<meta charset="UTF-8">
2<script src="library.js"></script>
3<script src="main.js"></script>

library.js

javascript
1"use strict";//厳格化
2//-----------------------------------------------------------------------------------------------------------------------------------
3let _canvas = undefined;
4let ctx = undefined;
5let img = undefined;
6let system = {
7    id:""
8}
9//-----------------------------------------------------------------------------------------------------------------------------------
10class set{//set関数
11    body(){
12        system["id"]="<<body>>";
13        return this;
14    }
15    title(text){
16        document.title=text;
17        return this;
18    }
19    icon(url){
20        const new_ele = document.createElement("link");
21        new_ele.rel="icon";
22        new_ele.href=url;
23        document.head.appendChild(new_ele);
24        return this;
25    }
26    css(name,option){
27        let key_name = [];
28        let key_option = [];
29        if(system["id"]!==""){
30            let id = undefined;
31            if(system["id"]==="<<body>>")id = document.body;
32            else
33            id = document.getElementById(system["id"]);
34            if((typeof name)==="object"){
35                key_name=[...(Object.keys(name))]
36                for(let i = 0;i<key_name.length;i++){
37                    key_option.push(name[key_name[i]]);
38                }
39            }else{
40                key_name.push(name);
41                key_option.push(option);
42            }
43            for(let i = 0;i<key_name.length;i++){
44                css_edit(key_name[i],id,key_option[i]);
45            }
46            key_name=[];
47            return this;
48        }else{
49            console.error("エラー：\nidが指定されていません");
50        }
51    }
52    change(text){
53        return $(text);
54    }
55}
56//-----------------------------------------------------------------------------------------------------------------------------------
57class add{
58    canvas(sizex,sizey,id,color){
59        const new_ele = document.createElement("canvas");
60        new_ele.style.backgroundColor=color;
61        new_ele.width=sizex;
62        new_ele.height=sizey;
63        new_ele.id=id;
64        system["id"]=id;
65        document.body.appendChild(new_ele);
66        return this;
67    }
68    p(text,id){
69        const new_ele = document.createElement("p");
70        new_ele.id=id;
71        new_ele.appendChild(document.createTextNode(text));
72        document.body.appendChild(new_ele);
73    }
74    h1(text,id){
75        const new_ele = document.createElement("h1");
76        new_ele.id=id;
77        new_ele.appendChild(document.createTextNode(text));
78        document.body.appendChild(new_ele);   
79    }
80    h2(text,id){
81        const new_ele = document.createElement("h2");
82        new_ele.id=id;
83        new_ele.appendChild(document.createTextNode(text));
84        document.body.appendChild(new_ele);   
85    }
86    h3(text,id){
87        const new_ele = document.createElement("h3");
88        new_ele.id=id;
89        new_ele.appendChild(document.createTextNode(text));
90        document.body.appendChild(new_ele);   
91    }
92    h4(text,id){
93        const new_ele = document.createElement("h4");
94        new_ele.id=id;
95        new_ele.appendChild(document.createTextNode(text));
96        document.body.appendChild(new_ele);   
97    }
98    h5(text,id){
99        const new_ele = document.createElement("h5");
100        new_ele.id=id;
101        new_ele.appendChild(document.createTextNode(text));
102        document.body.appendChild(new_ele);   
103    }
104    h6(text,id){
105        const new_ele = document.createElement("h6");
106        new_ele.id=id;
107        new_ele.appendChild(document.createTextNode(text));
108        document.body.appendChild(new_ele);   
109    }
110    change(text){
111        return $(text);
112    }
113}
114//-----------------------------------------------------------------------------------------------------------------------------------
115class remove{//remove関数
116    id(id){
117        let element = document.getElementById(id);
118        element.remove();
119        return this;
120    }
121    change(){
122        return $(text);
123    }
124}
125//-----------------------------------------------------------------------------------------------------------------------------------
126function $(text) {
127    if(text==="%set")return new set();
128    if(text==="%add")return new add();
129    if(text==="%remove")return new remove();
130}
131//-----------------------------------------------------------------------------------------------------------------------------------
132function css_edit(key,id,option){
133    if(key==="background-color"){id.style.backgroundColor=option;}
134    if(key==="color")id.style.color=option;
135    if(key==="margin")id.style.margin=option;
136    if(key==="padding")id.style.padding=option;
137    if(key==="display")id.style.display=option;
138    if(key==="text-align")id.style.textAlign=option;
139    if(key==="font-size")id.style.fontSize=option;
140}

main.js

javascript
1window.onload=(function(){
2    $("%set").title("JSサイト").icon("https://raw.githubusercontent.com/sugoruru/site-material/main/favicon/Pg-v.png");
3    $("%set").body().css({
4        "margin":"0",
5        "padding":"0"
6    });
7    $("%add").h1("タイトル","h1").change("%set").css({
8        "color":"#000000",
9        "text-align":"center",
10        "font-size":"20"
11    });
12    $("%add").p("ここにtext","p1");
13    $("%set").css({
14        "text-align":"center",
15        "color":"#000000",
16        "font-size":"15"
17    });
18    $("%add").canvas(640,640,"canvas").change("%set").css({
19        "background-color":"#999999",
20        "margin":"auto",
21        "padding":"0",
22        "display":"block"
23    });
24});

エラー文はこれです:
Uncaught TypeError: Cannot read properties of undefined (reading 'change')

yambejp

2022/03/22 05:11 編集

エラーがわからないならまずはエラーが出ないところまで規模を小さくして処理してみてくださいちなみにどこでどういうエラーがでているのでしょうか？

sgru_

2022/03/22 05:08

すみません！何とかしてみます

int32_t

2022/03/22 05:11

どんなエラーが出たのかどう「いろいろ」したのか質問文に書いてください。

y_waiwai

2022/03/22 05:13

エラーが出たなら、エラーメッセージを提示しましょうエラーメッセージは、よけいな省略翻訳しないで出たそのママをコピペで提示してください

yambejp

2022/03/22 05:15

このへんまでは普通に動きますね function set(){}; set.prototype={ title:function(text) { document.title=text; console.log(this); return this; }, icon:function(url){ const new_ele = document.createElement("link"); new_ele.rel="icon"; new_ele.href=url; document.head.appendChild(new_ele); return this; }, } function $(text) { if(text==="%set")return new set(); } $("%set").title("JSサイト").icon("https://raw.githubusercontent.com/sugoruru/site-material/main/favicon/Pg-v.png"); 名前の付け方が雑なので、専用のなまえをつけるかクラス化した方が良いと思います

sgru_

2022/03/22 05:42

一応クラス型にしてみました。なにかあれば教えてください。

yambejp

2022/03/22 05:46

ざっとみたところh1メソッドがthisを返していないのでチェーン処理できないですね

sgru_

2022/03/22 05:52

ほんとでした！ありがとうございます... ちゃんと見ていなかったのがいけませんでした