0

I wrote a program that searches the array between people and displays the result in the elements Sorry, this program does not work because it does not recognize the function this.showResultSearch Search codes have no problem, it does not work Please Guide me to the conclusion This is part of my program code that does not work and confuses me. Please edit my code correctly. I do not want the location of the functions to change

I use the pattern builder template in this program and I want the location of the functions and the program to work the same way.

Please test the app

function ElementBuilder(name) {
        this.element = document.createElement(name);
        this.appendTo = function (id) {
            this.appendElement = document.getElementById(id).append(this.element);
            return this
        }
        this.addEventListener = function (event, fun) {
            this.element.addEventListener(event, fun);
            return this;
        };
        this.text = function (text) {
            this.element.textContent = text;
            return this;
        };
        this.build = function () {
            return this.element;
        };
    };
    const builder = {
        create: function (name) {
            return new ElementBuilder(name);
        }
    };

    function PhoneBook() {
        this.array = [
            { name: "nadiya", phone: 123456 }, { name: "amir", phone: 123456 },
            { name: "niloufar", phone: 123456 }, { name: "arman", phone: 123456 },
            { name: "sara", phone: 123456 }, { name: "pariya", phone: 123456 }];

        const self = this;

        this.search = function () {
            const selectInput = document.getElementById("inputSearch").value;
            const validStr = /[A-Za-z]{2,}/;
            const validInput = validStr.test(selectInput);
            if (!validInput) alert("To search, it must be more than 2 characters and use letters")
            else {
                const result = self.array.filter((obj) => {
                    return obj.name.toUpperCase().includes(selectInput.toUpperCase())
                });
                if (result.length === 0) {
                    alert("Contact not found")
                } else {
                    return result;
                }
            }

        };
    };

    function Render(container) {
        this.container = container;
        const phoneBook = new PhoneBook();
        this.startSearch = function () {
            this.showResultSearch()
        };
        const callSearch = phoneBook
            .search();
        this.init = function () {
            const buttonSe = builder
                .create("button")
                .appendTo("formserch")
                .text("search App")
                .addEventListener("click", () => this.startSearch())
                .build();
        }
        this.showResultSearch = function () {
            const searchResult = callSearch;
            if (searchResult && searchResult.length > 0) searchResult.forEach((ele) => {
                const nameContent = builder
                    .create('p')
                    .text(`${ele.name}`)
                    .appendTo("showSearch")
                    .build();
                const phoneContent = builder
                    .create('p')
                    .text(`${ele.phone}`)
                    .appendTo("showSearch")
                    .build();
            });
        }
    }
    const phoneBookContainer = document.getElementById("phone-book-container");
    const app = new Render(phoneBookContainer);
    app.init();
<form id="formserch">
        <input type="text" placeholder="Search" id="inputSearch">
  </form>
    <div id="showSearch"></div>
goodboy
  • 1
  • 2
  • Can anyone really help me reach the result? !!! – goodboy Apr 15 '21 at 20:09
  • Should be `addEventListener("click", () => this.startSearch())`, as otherwise `startSearch` will not be called with the current `this` as the function's `this`. – trincot Apr 15 '21 at 20:15
  • @trincot Can you please edit my code? In the same way? – goodboy Apr 15 '21 at 20:17
  • @trincot Please help me, I'm very confused – goodboy Apr 15 '21 at 20:20
  • Did you already read the duplicate references? There is a lot to read there about `this`. Your confusion has to do with understanding `this`. – trincot Apr 15 '21 at 20:23
  • @trincot Can you tell me where to go to learn? And you edit my code so that I can learn from myself next time and solve my problem Thank you for helping me – goodboy Apr 15 '21 at 20:28

0 Answers0