mercredi 31 mai 2017

Module pattern, what do I do wrong?

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.

http://ift.tt/2seRpNe

// 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