CODEWITHSUNDEEP
javascript
kayak
kayak

Reputation: 438

JavaScript function importing doesn't work properly

I'm referring the code below. https://github.com/jonasschmedtmann/complete-javascript-course/blob/master/9-forkify/final/src/js/views/searchView.js

I made a function and tried to import the function to another js file but it doesn't work. If I write "elements.searchInput.value;" it won't work while if I do "console.log(elements.searchInput.value)" it will work. I'm doing exactly the same as the reference file but just wondering why my code doesn't work.

index.js

import "./../styles/style.scss";
import Search from './models/Search';
import * as searchView from './views/SearchView';
import { key, proxy } from './config';
import { elements } from './views/Base';

const state = {};

const controlSearch = async () => {
    const query = searchView.getInput(); // <- This doesn't work
    console.log(query) // Get nothing

    if(query) { // <- Can't get in to this part
        state.search = new Search(query);
        console.log("New Search", state);
    }
}

elements.searchForm.addEventListener('submit', e => {
    event.preventDefault();
    controlSearch();
});


searchView.js

import { elements } from './base';

export const getInput = () => {
    elements.searchInput.value; // This code won't show up in controlSearch function

export const clearInput = () => {
    elements.searchInput.value = '';
};

base.js

export const elements = {
    searchForm: document.querySelector('.search'),
    searchResult: document.querySelector('.movie_list'),
    searchInput: document.querySelector('.search__field')
}

Search.js

import { key } from '../config';

export default class Search {
    constructor(query) {
        this.query = query;
    }

    async getResults() {
        try {
            const res = await axios(`http://`);
            this.result = res.data.results;
        }

        catch (error) {
            alert(error);
        }
    }

}

Upvotes: 0

Views: 147

Answers (2)

Dnl
Dnl

Reputation: 601

Getter functions have to return a value.

const yourFunction = () => { return yourVariable };

Or with the arrow function you can use:

const yourFunction = () => yourVariable;

Upvotes: 3

delis
delis

Reputation: 594

this is your problem here 

export const getInput = () => {
    elements.searchInput.value;

You are not returning anything change it to

export const getInput = () => elements.searchInput.value;

or

export const getInput = () => {
    return elements.searchInput.value; 
}

Upvotes: 2

Related Questions