on click و دریافت دیتای div مورد نظر در js

معمولا به این شکل کار نمیکنند نقشه ها و اگر بخوای اینکار رو کنید چند ملیون div باید بسازید برای هر منطقه و کوچه و بخش ولی به صورت کلی چند تا قابلیت دارید یکیش اینه که روی div یکسری اتریبیوت تنظیم بشه یا یک اتریبیوت به اسم ID تنظیم بشه و در یک فایل JSON اطلاعات مرتبط به اون ID رو داشته باشید مثلا

json = {
"1" : {
 name: "خیابان ....",
"address" : منطقه .... کوچه .... پلاک ..... 
}
}

var divList = document.querySelectorAll(".map-divs");
divList.foreach (element => {
element.addEventListener("click", ()=>{

    var elementID = document.getAttribute('dataID');
console.log( json[elementID])
})
})

این یک مثال ساده بود شاید شیوه های خیلی بهتری هم وجود داشته باشه ولی در مرحله اول اینجا یک json میسازیم برای ذخیره سازی اطلاعات خیابان ها و به هر خیابان یه ID میدیم حالا مهمه که روی اون DIV مرتبط یک اتریبیوت به نام dataID تنظیم بشه در مرحله بعد تمامی div هارو با querySelectorAll میگیریم و به یک حلقه foreach متصل میکنیم برای کلیک کردن روی دیو ها و ...

میتونی با پراپرتی innerText مقدار درون دیو را بگیری و توی متغیر یا ابجکت بریزی و توی لوکال یا کوکی ذخیره کنی