updated the whole code and made it easy

Author: CSP02

Methods.js

@@ -1,24 +1,28 @@
 window.onload = function () {
-    const listOfMethods = document.getElementsByClassName("CThis")
-    let methodName = []
-    let content = []
-    for (let i = 0; i < listOfMethods.length; i++) {
-        const cont = listOfMethods[i];
-        methodName.push(cont.getAttribute('as'))
-        content.push(cont.innerHTML)
+    let definition = document.getElementsByTagName('def')
+    let methodNames = []
+    let methodContent = []
+    let methodDefTags = []
+
+    for (let i = 0; i < definition.length; i++) {
+        let methodDefs = definition[i];
+        methodDefs.style.visibility = 'hidden'
+        methodNames.push(methodDefs.getAttribute('name'))
+        methodContent.push(methodDefs.innerHTML)
+        methodDefTags.push(methodDefs)
     }
 
-    var toPaste = document.getElementsByClassName("PHere")
-    for (let j = 0; j < methodName.length; j++) {
-        let methodN = methodName[j];
-        for (let i = 0; i < toPaste.length; i++) {
-            var element = toPaste[i];
-            const method = element.getAttribute('as')
-            if (methodN == method) {
-                element.innerHTML = content[j]
-            } else {
-                continue
-            }
+    for (let j = 0; j < methodNames.length; j++) {
+        const methodName = methodNames[j];
+        let methodCall = document.getElementsByTagName(methodName)
+        for (let k = 0; k < methodCall.length; k++) {
+            let tag = methodCall[k];
+            tag.innerHTML = methodContent[j]
         }
     }
+
+    for (var l = 0; l < methodDefTags.length; l++) {
+        console.log(methodDefTags[l])
+        methodDefTags[l].remove()
+    }
 }

README.md

@@ -4,23 +4,33 @@
  A package that can handle methods in html(for non repetative code).
 
 # What is Methods?
- Have you ever get frustated of writing the same code in html to get what you want. Then here you are use this package? to make it easy with just a class and an attribute called **"as"**.
+ Have you ever get frustated of writing the same code in html to get what you want. Then here you are use this package? to make it easy by defining your method using a **"def"** tag and **"name"** attribute to name your method.
 
 # Usage:
  - Methods package is very simple to use.
- - All you need to do is to set the class name to ***CThis*** which means **copy this** and the attribute I defined basically called as ***as*** which should be the name of your method or the code you want to copy and use.
- - After that set the class name to ***PHere*** which means **paste here** where ever you want to use that code in your HTML.
+ - All you need to do is to define the method using **"def"** tag and **"name"** attribute.
+ - And then to call the method you can use the value you provided in name attribute.
  - That's it.
  **Note: You can copy any code that means if you want to copy the code which is at the bottom it will work.**
 
 # Example:
 
 ```html
-<div class="CThis" as="test1">Writing this code at the beginning</div>
-<div class="PHere" as="test1"></div>
-<div class="PHere" as="BottomCode"></div>
-<div class="CThis" as="BottomCode">This is the code at bottom yet it will work</div>
+<test></test>
+<commit></commit>
+<!--use the method name as the tag name-->
+<def name="test">
+    <p>Help</p>
+</def>
+<def name="commit">
+    <p>commit</p>
+</def>
 ```
 
+## NOTE:
+- Remember that these def tags will be removed once the page is loaded so that you cannot see the code inside this def tags
+- So the code inside these tags only works once you call them using as a tag name
+- Run [index.html](https://github.com/Chandra-sekhar-pilla/HTML-methods/blob/main/index.html) file and inspect the changes in html so you can know more.
+
 # Output:
- ![MethodsOutput](https://github.com/Chandra-sekhar-pilla/HTML-methods/blob/main/Resources/Output.png)
+ ![MethodsOutput](https://github.com/Chandra-sekhar-pilla/HTML-methods/blob/main/Resources/outPutv2.png)

Resources/outPutv2.png

@@ -8,11 +8,22 @@
     <script src="Methods.js"></script>
 </head>
 <body>
-    <div class="CThis" as="test1">Writing this code at the beginning</div>
-    <p>The above code is the actual code and the below code is the copied one.</p>
-    <div class="PHere" as="test1"></div>
-    <div class="PHere" as="BottomCode"></div>
-    <p> leaving a space inorder to make sure the bottom one is the actual code and the above one is copied one.</p>
-    <div class="CThis" as="BottomCode">This is the code at bottom yet it will work</div>
+
+    <!--use the method name as the tag name i.e here test and commit are the method names-->
+    <test></test>
+    <commit></commit>
+
+    <!--
+        define the methods. That means here def tag is used to define the methods and name attribute as the method name
+        Remember that these def tags will be removed once the page is loaded so that you cannot see the code inside this def tags
+        So the code inside these tags only works once you call them using as a tag name
+        run this file and inspect the changes in html so you can know more
+    -->
+    <def name="test">
+        <p>Methods.js</p>
+    </def>
+    <def name="commit">
+        <p>commit</p>
+    </def>
 </body>
 </html>