رفع دکمه “نمایش بیشتر / نمایش کمتر” با جاوا اسکریپت

سلام توسعه دهندگان! 👨‍💻👩‍💻
من یک دانشجوی CS هستم و جاوا اسکریپت را یاد می‌گیرم زیرا می‌خواهم یک توسعه‌دهنده فرانت‌اند باشم و امروز می‌خواستم مفهومی را که اخیراً در حین ساخت دکمه ساده «نمایش بیشتر / نشان دادن کمتر» با استفاده از جاوا اسکریپت یاد گرفتم به اشتراک بگذارم.
میشه بگید کد اول با کد دوم چه فرقی داره
و جادوگر حقیقت دارد!!

من سعی داشتم دکمه ای ایجاد کنم که نمایان بودن متن را تغییر دهد، مانند این:

html ساده 2 پاراگراف یکی از آنها با کلاس متن مخفی متن
دکمه ای که آن را تغییر می دهیم و دکمه ای که کار را انجام می دهد

lorem ipsum dolor sit amet consectetur adipisicing elit. 
fsdfsfsd .... 
 
show more....

css:

.hidden-text {
  display: none;
}

تمام متغیری که نیاز دارم را اعلام کردم

let showButton = document.querySelector(".show-more");
let text = document.querySelector(".text");
let value = false; // Initially, the text is hidden

اولین کد من این بود:

showButton.addEventListener("click", (value) => {
    value = !value;
    text.classList.toggle("hidden-text");
    showButton.textContent = value ? "show less..." : "show more..."; // Update button text
});

اما این کار نکرد، مقدار همیشه نادرست بود، حتی اگر از value=!value استفاده کردم
بعد از کمی جستجو متوجه شدم که چرا این اتفاق افتاده است

هر بار که روی دکمه کلیک می‌شد، پارامتر مقدار محلی داخل تابع callback مجدداً اعلام می‌شد که مقدار خارجی را سایه می‌اندازد.

این بدان معناست که مقدار بیرونی بدون تغییر باقی می ماند و همیشه نادرست می ماند.
و مقدار محلی در داخل callback تغییر می‌کند، اما فقط در طول اجرای آن تابع وجود دارد و بر مقدار خارجی تأثیر نمی‌گذارد.

برای حل این مشکل، باید پارامتر مقدار را از پاسخ به تماس حذف کنم و مستقیماً از مقدار خارجی که در هر کلیک روی دکمه باقی می ماند استفاده کنم.

let value = false; // Persistent state variable

showButton.addEventListener("click", () => { 
    value = !value; // Toggle the outer value
    text.classList.toggle("hidden-text");
    showButton.textContent = value ? "show less..." : "show more..."; // Update button text based on value
});