Похоже, очень плохая практика делать то, что вы хотите сделать из первой части вопроса. Почему бы просто не вызвать функцию? Что я имею в виду:
- У вас есть кнопка A, которая вызывает функцию A, и кнопка B.
- Почему бы не вызвать кнопку B для вызова одной и той же функции A? Или функция A2, которая внутри себя вызывает соответствующие части или целую функцию A)
Что касается того, как их соединить - вторая часть вашего вопроса, я бы сказал, гораздо больше о хорошем трек - просто import foo from 'path/to/foo'? (Если у вас есть настроенный узел). Каковы ваши настройки, что вы используете?
Почему это плохая практика? Разделение проблем. Если вы не уверены, что это такое, попробуйте проверить Чистый код или другое подобное руководство. Вот хорошее видео от дяди Боба (Чистый код) https://www.youtube.com/watch?v=2dKZ-dWaCiU
Например, ваша проблема в том, что ваша корзина находится на главной странице. Так не должно быть. Это не должно быть на странице. Страница является деталью. Корзина должна работать независимо от каких-либо страниц.
Этот ответ предполагает, что вы учитесь, а не выполняете работу с клиентом, и поэтому стремитесь понять решение прямой проблемы.
Вот минимальный (хотя и не очень хороший) способ соединения двух файлов.
<!-- index.html -->
<html>
<body>
<button>Button text</button>
</body>
<script src='./foo.js'></script>
</html>
// foo.js
console.log('hi from foo')
Вам нужны функции, доступные на разных страницах, т.е. импортированные на каждой странице. Вы можете просто импортировать его так каждый раз. Или проверить рамки, чтобы сделать это для вас. Имейте в виду, что фреймворки - это не конец, а все решения , хотя для изучения, я думаю, они бы поставили вас на правильный путь.
Способ сделать это с помощью модулей (как указано в комментарии Как сделать импорт / экспорт класса в Vanilla JavaScript (JS) )
<script type="module" src="./foo.js"></script>
Удачи:)