Как создать повторяющийся скрипт для разных объектов в одном js файле?

Здравствуйте. Я только начал изучать js и понимаю в нём ровно ничего. Вынудила вёрстка, т.к. на макете несколько кнопок, которые скрывают/показывают контент. Дедлайна нет, так что времени на решение хватает. Так вот.
Верстаю лендинг и на главной странице лендинга 6 кнопок, которые раскрывают/скрывают контент. Пару лекций по js посмотрел, немного понял, как писать функции. Написал скрипт для первой кнопки, которая показывает по нажатию скрытый текст и меняет надпись с read me на hide. Идентично первому, написал скрипт для второй, но почему то при нажатии на вторую кнопку открывается первая, что бы я не делал.
Попробовать создать новый js файл и написать в нём и ура, кнопка заработала корректно. Как я понимаю, это не самый лучший способ повторения скрипта. Не могли бы вы сказать, как написать все скрипты в одном файле js?
html

             <h2 class="heading1--we_are_best">WE ARE BEST</h2>
				<p class="section-heading1--text">
				Lorem ipsum dolor  mero moleamet,
				soluta euism od isea, hiea unereusams
				ullu tpamco detore  aer rper quo, utam
				signiferuuue uo. Brute inani in prom in
				<span class="content hidden">Lorem ipsum dolor  mero moleamet,
				soluta euism od isea, hiea unereusams
				ullu tpamco detore  aer rper quo, utam
				signiferuuue uo. Brute inani in prom in</span></p>
				<button class="btn" type="button">READ MORE</button>

java

const btn = document.querySelector(".btn");
const content = document.querySelector(".content");

btn.addEventListener("click", btnClick);

function btnClick() {
console.log(content.classList);

if (content.classList.contains("hidden")) {
    btn.textContent = "HIDE";
} else {
    btn.textContent = "READ MORE";
}

content.classList.toggle("hidden");
}

html

             <p class="sectiong-heading4--text">Lorem ipsum dolor  mero moleamet,
				soluta euism od isea, hiea unereusams
				ullu tpamco detore  aer rper quo,utam
				signiferuuue uo. Brute inani in
				<span class="content-portfolio hidden-portfolio">Lorem ipsum dolor  mero moleamet,
				soluta euism od isea, hiea unereusams
				ullu tpamco detore  aer rper quo,utam
				signiferuuue uo. Brute inani in</span></p>
				<button class="btn-portfolio">READ MORE</button>

java

const btnPortfolio = document.querySelector(".btn-portfolio");
const contentPortfolio = document.querySelector(".content-portfolio");

btnPortfolio.addEventListener("click", btnClickFuture);

function btnClickFuture() {
console.log(contentPortfolio.classList);

if (contentPortfolio.classList.contains("hidden-portfolio")) {
    btnPortfolio.textContent = "HIDE";
} else {
    btnPortfolio.textContent = "READ MORE";
}

contentPortfolio.classList.toggle("hidden-portfolio");
}

html

             <div class="flex-item1">Lorem ipsum dolor  mero moleamet, soluta euism od
				isea, hiea unereusams ullu tpamco detore  aer rper
				quo,utam signiferuuue uo. Brute inani in prom in.Lorem
				ipsum dolor  mero moleamet, soluta euism od
				<span class="content-flex1 hidden-flex1">Lorem ipsum dolor  mero moleamet, soluta euism od
				isea, hiea unereusams ullu tpamco detore  aer rper
				quo,utam signiferuuue uo. Brute inani in prom in.Lorem
				ipsum dolor  mero moleamet, soluta euism od</span>
				<button class="btn-testimonials1 btn">READ MORE</button>
				</div>

java

const btnTestimonials = document.querySelector(".btn-testimonials1");
const contentFlex1 = document.querySelector(".content-flex1");

btnTestimonials.addEventListener("click", btnClickTestimonials);

function btnClickTestimonials() {
console.log(contentFlex1.classList);

if (contentFlex1.classList.contains("hidden-flex1")) {
    btnTestimonials.textContent = "HIDE";
} else {
    btnTestimonials.textContent = "READ MORE";
}

contentFlex1.classList.toggle("hidden-flex1");
}

Ещё есть место на сайте, где 1 кнопка открывает сразу два текстовых блока. Нашёл в интернете способ, который помог, но при нажатии кнопка меняет название на HIDE(когда текст показан), но когда нажимаешь на неё и текст скрывается, название не меняется обратно на READ MORE. Коды приложу.

html

				<div class="section-div--feature">
					<h3 class="section-div-heading--feature">FEATURE</h3>
					<p class="section-div--feature--text">
					Lorem ipsum dolor  mero moleamet,	soluta
					euism od isea, hiea unereusams ullu
					tpamco detore  aer rper quo, utam sig
					-niferuuue uo. Brute inani in prom in.Lorem
					<span class="hidden-about_us content_about_us">Lorem ipsum dolor  mero moleamet,	soluta
					euism od isea, hiea unereusams ullu
					tpamco detore  aer rper quo, utam sig
					-niferuuue uo. Brute inani in prom in.Lorem</span></p>
				</div>
				<img src="/images/future_line.png" alt="white-line" class="future_line">
				<div class="section-div--about_us">
					<h3 class="section-div-heading--about_us">ABOUT US</h3>
					<p class="section-div--about_us--text">
					Lorem ipsum dolor  mero moleamet,	soluta
					euism od isea, hiea unereusams ullu
					tpamco detore  aer rper quo, utam sig
					-niferuuue uo. Brute inani in prom in.Lorem
					<span class="hidden-about_us content_about_us">Lorem ipsum dolor  mero moleamet,	soluta
					euism od isea, hiea unereusams ullu
					tpamco detore  aer rper quo, utam sig
					-niferuuue uo. Brute inani in prom in.Lorem</span></p>
				</div>
				<button class="btn-lorem_ipsum">READ MORE</button>

java

let btnAboutUs = document.querySelector(".btn-lorem_ipsum");
let contentAboutUs = document.querySelectorAll(".content_about_us");

btnAboutUs.addEventListener("click", btnClickAboutUs);

function btnClickAboutUs() {
for (let btnAboutUs of contentAboutUs) btnAboutUs.classList.toggle("hidden-about_us");

btnAboutUs.textContent = btnAboutUs.textContent === "READ MORE" ? "HIDE" : "HIDE";
}

Заранее спасибо всем ответившим. Если не затруднит, то объясните решение)

Количество файлов не должно влиять на то, как код работает. И ошибок я не вижу. Можешь собрать все в один проект (пусть даже он не работает) и выложить куда-нибудь (github, jsfiddle и т.д.)?

Вот ссылка на репорзиторий в gh

Криво закомитил. Посмотрите ещё раз) там 2 js файла не хватало

Проблема в том, что в JS ты ссылаешься на классы .btn-portfolio и .content-portfolio, а в HTML они у тебя называются .div--portfolio и section-button--read_more. Названия классов в HTML и JS должны совпадать.
То же самое для остальных секций (testimonials, about-us)

Посмотри ещё раз, пожалуйста. Там с гитом проблема была, он чёт index.html не закомитил) сейчас всё свежее.

Попробуй добавить точку в начале пути к js файлу <script src="./js/button_about-us.js"></script>
А также после апдейта у тебя во всех скриптах конфликты (там не должно быть строк типа:

<<<<<<< HEAD
=======
>>>>>>> b02c0a9e0da9da8a704443e743266ab7d956aa5f

)

1 лайк

Так вот, вопрос в том, как все эти 5 скриптов объединить в один? Ведь они исполняют одинаковую функцию)

Ну как одинаковую. Они привязаны к разным кнопкам и разным блокам. Так что для начала можно ограничиться просто переносом всего кода в один файл.

Если не понравится - можешь просто оборачивать каждую функцию, которую передаешь в addEventListener в еще одну функцию, куда передавать свою кнопку и контейнер и внутри уже обрабатывать клики:

function onButtonClick (button, container) {
	return function () {
		button.textConten = "Hide";
		container.classList.toggle('hidden');
		// etc
	}
}

const btn = document.querySelector(".btn");
const content = document.querySelector(".content");

btn.addEventListener("click", onButtonClick(btn, content)); // то же самое для остальных кнопок и контейнеров

https://learn.javascript.ru/closure

Но это такая себе практика, поэтому, если этого покажется недостаточно, то можно либо почитать про обход ДОМ-дерева (тебе нужно перехватывать клик на каждой кнопке, подниматься по дереву вверх до ближайшей обертки контента и разворачивать ее).
https://learn.javascript.ru/traversing-dom

Или ты можешь пойти еще дальше, навесить один listener на страницу, перехватывать все клики и проверять, что кликнули по кнопке + делать все, что описано в предыдущем пункте.
https://learn.javascript.ru/event-delegation

1 лайк