почему первый код не работает как и второй
onclick'у надо присваивать значением – функцию. Например
id1.onclick = function() { Place('Вода'); };
Тогда эта присвоенная функция выполнится при клике.
как правильно реализуется такая простая задумка
Где собираетесь хранить параметры каждого из 200 «объектов»? Можно прямо в разметке, в data-атрибутах, как посоветовали. Но неужели будете все 200 объектов прописывать вручную? Наверняка захочется их и создавать программно. Данные отдельно, оформление отдельно. Например:
const objects = ["вода", "вода", "суша", "берег"];
function commonClickHandler(title, id) {
console.log('Кликнули объект «%s» с id=%s', title, id);
}
objects.forEach((title, i) => {
const div = document.createElement('div');
const id = `id${i}`;
div.id = id;
div.addEventListener('click', () => commonClickHandler(title, id));
document.body.appendChild(div);
});
Фиддл