Почему я не могу вызвать функцию из другого файла .js?

Question

[gooseNjuice ()]

Почему так работает (кнопка и скрипт в одном *.js)

<button id='submit' onClick={function (e) {
        e.preventDefault();
        var login = $('#login').val();
        var password = $('#password').val();
        console.log(login);
        console.log(password);
    }}>Log In</button>

А так - нет (кнопка и скрипт в разных *.js)?

import $ from 'jquery';
import './index'; //это вот *.js, который кнопку отрисовывает
function submit(e){
    e.preventDefault();
    var login = $('#login').val();
    var password = $('#password').val();
    console.log(login);
    console.log(password);
};
$('#submit').click(submit(e));

1) Когда начинаю вводить $('#... в списке id не виден id кнопки, ну и консоль при нажатии кнопки выдаёт

Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src localhost:3000”). Source: ;(function installGlobalHook(window)

2) Если 'e' передаю НЕ в анонимную функцию, а так, как в примере, появляется 'e' is not defined

Answer 1

[Alexander Litvinenko]

Потому что области видимости разные.

Судя по

import $ from 'jquery';

у вас тут вебпак, вобще вам рано такие вещи раз еще используете jquery, но раз уже взялись

В серверном жс каждый файл это отдельный модуль со своей собственной облатью видимости, а вебпак именно серверный жс и стараеться повторить. Вам надо импортировать и экспортировать свойства чтобы они стали доступны в других модулях.

Comments

[gooseNjuice ()]

Буду чудовищно благодарен, если приведете пример, как это сделать)

[Alexander Litvinenko]

В первом файле пишите

const Foo = {......}
......

export default Foo;

А где используете то наоборот

import Foo from 'path/Foo';

......

https://developer.mozilla.org/en-US/docs/web/javas...
https://developer.mozilla.org/en-US/docs/Web/JavaS...

[Mr Hobot]

Чем плох jQuery ?

[Alexander Litvinenko]

10 см, ну это как нормальную, работающую лампочку выкрутить и вставить туда самодельную свечку сделаную из фитиля и вчерашнего завтрака, а главный вопрос который посетит адекватного электрика когда это увидит - "ЗАЧЕМ???!"

Вот и меня как нормального "электрика" посещает вопрос зачем вместо нативной функции вы подключаете делающую тоже самое, но хуже, функцию из библиотеки.

Answer 2

[ThemeZV]

Что здесь вообще происходит.. зачем React и JQuery вместе?

Comments

[gooseNjuice ()]

А почему нет? Они же вроде бы разный функционал на себя берут

[Abraham Goldreich]

gooseNjuice (), функционал как раз таки разный, но на сегодняшний день нет ничего, что бы понадобилось React разработчику от jQuery. А вообще, это нормальный переходный этап в понимании JS экосистемы.

Для того, чтобы производить поиск элементов по селектору есть нативные функции:

// Поиск по ID
var b = document.getElementById('login').value;
 // Прям как jQuery, по любым селекторам
var a = document.querySelector('#login').value;

jQuery также часто используют, не зная как иначе работать с AJAX. Порекомендую для этого использовать Axios.

[gooseNjuice ()]

Abraham Goldreich, вы попали в точку насчет AJAX) Спасибо за рекомендацию