Блог

Я имею в виду приведенный ниже код. https://github.com/jonasschmedtmann/complete-javascript-course/blob/master/9-forkify/final/src/js/views/searchView.js

Я создал функцию и попытался импортировать функцию в другой js-файл, но это не работает. Если я напишу «elements.searchInput.value;», это не сработает, а если я сделаю «console.log (elements.searchInput.value)», это сработает. Я делаю то же самое, что и файл ссылки, но просто задаюсь вопросом, почему мой код не работает.

 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);
        }
    }

}
  

Функции получения должны возвращать значение.

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

Или с помощью функции arrow вы можете использовать:

 const yourFunction = () => yourVariable;
  

это ваша проблема здесь

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

Вы ничего не возвращаете
, измените его на

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

или

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