I want to use module pattern on this simple application, where you can search for countries, and some cities show up. I have read about module pattern, and it seems like its a usefull thing to learn.
I need some help with the syntax. I have written in what I thought was correct, but it did not work so I commented it out, can someone try to explain to me how to use it in my own example, its easier for me to understand. You can see the code that I tried it with under.
The "searchElements" and "getAllElements" are the functions that I want to have in the module file, together with the JSON objects.
// var search_elements = (function(){
var searchElements =
document.getElementById("btn").addEventListener("click", (e) => {
container.innerHTML = "";
e.preventDefault();
var innerDiv = document.getElementsByTagName("div");
var input = document.getElementById("input").value;
for(var i = 0; i < arrayList.length; i += 1) {
target = arrayList[i].land.toLowerCase();
if(input.toLowerCase() === target.toLowerCase()) {
var newCard = document.createElement("div");
var landElement = document.createElement("P");
var landContent = document.createTextNode(arrayList[i].land);
landElement.appendChild(landContent);
var byElement = document.createElement("h3");
var byContent = document.createTextNode(arrayList[i].by);
byElement.appendChild(byContent);
var img = document.createElement("img");
img.setAttribute("src", arrayList[i].img);
newCard.appendChild(img);
newCard.appendChild(landElement);
newCard.appendChild(byElement);
container.appendChild(newCard);
} else {
continue;
}
}
return {
searchElements: searchElements
}
});
// var get_all = (function(){
var getAllElements =
document.getElementById("btnTwo").addEventListener("click", (e) => {
container.innerHTML = "";
e.preventDefault();
var innerDiv = document.getElementsByTagName("div");
for(var getAll = 0; getAll < arrayList.length; getAll += 1){
var newCard = document.createElement("div");
var landElement = document.createElement("P");
var landContent = document.createTextNode(arrayList[getAll].land);
landElement.appendChild(landContent);
var byElement = document.createElement("h3");
var byContent = document.createTextNode(arrayList[getAll].by);
byElement.appendChild(byContent);
var img = document.createElement("img");
img.setAttribute("src", arrayList[getAll].img);
newCard.appendChild(img);
newCard.appendChild(landElement);
newCard.appendChild(byElement);
container.appendChild(newCard);
}
return {
getAllElements: getAllElements
}
});
Aucun commentaire:
Enregistrer un commentaire