I want to modify all elements that use the same query via a function. (The function is not changed.)
r is read, w is write, and a is write appended to existing content. When using this as get(query).r , .w , .a , I want to make all elements corresponding.
For example, if the class of 3 p tags is html, if you write get(".html").w("hello") in js, all tags with the class of 3 html should be changed to 'hello'.
function get(id){
if (id) {
if (window === this) {
return new get(id);
}
var query = document.querySelectorAll(id)
for(var i = 0; i < query.length; i++) {
this.e = query[i];
return this;
}
} else {
return "getError : The attribute and value of a tag such as id or class specified by get does not exist. ";
}
}
get.prototype = {
r: function () {
return this.e.innerText;
},
w: function (writing) {
return this.e.innerText = writing;
},
a: function (writing) {
return this.e.innerText = this.e.innerText += writing;
}
};<a href="#" class="test">js</a>
<p href="#" class="test">html</p>
<a href="#" class="test">test</a>
<script>
get(".test").w("hello")
</script>For this line
for(var i = 0; i < query.length; i++) {
this.e = query[i];
return this;
}
You are only returning the first element. Thus, it only changes the inner text of the first element.
It seems that you are trying to assign a prototype to HTML elements, which is not recommended, so I modified your code.
I changed it so that the get function will return the whole HTMLCollection instead. Then I used the prototype of the get function to loop through the collection and set the text of the HTML elements.
<a href="#" class="test">js</a>
<p href="#" class="test">html</p>
<a href="#" class="test">test</a>
<script>
function get(id){
if (id) {
if (window === this) {
return new get(id);
}
var query = document.querySelectorAll(id)
return query
} else {
return "getError : The attribute and value of a tag such as id or class specified by get does not exist. ";
}
}
get.prototype = {
r: function () {
return this.e.innerText;
},
w: function (elems, writing) {
return elems.forEach(x => x.innerText = writing);
},
a: function (writing) {
return this.e.innerText = this.e.innerText += writing;
}
};
var elems = get(".test")
get.prototype.w(elems, "html")
</script>You can also do this with a newer ES2015 class method, that uses static methods. Static methods are called directly on the class, without creating an instance/object of the class. That way, you can call the static method and pass the class object back into those methods.
More info here:
See snippet below:
`use strict`
class Get {
constructor(selector) {
if (selector) return Array.from(document.querySelectorAll(selector));
return [];
}
static Read(elements) {
return elements.map(e => e.innerText)
};
static Write(elements, string) {
elements.forEach(e => e.innerText = string)
};
static Append(elements, string) {
elements.forEach(e => e.innerText = `${e.innerText}${string}`)
};
}
console.log(Get.Read(new Get(`.test`)));
Get.Append(new Get(`.test`), `: Appended Text`);<a href="#" class="test">js</a>
<p href="#" class="test">html</p>
<a href="#" class="test">test</a>