Как правильно прописать несколько событий onclick?
Для начала, лучше использовать addEventListener().

Ну а так, смотрите, здесь:
id1.onclick = Place('Вода');
вы присваиваете в onclick результат функции Place().
Так как функция ничего не возвращает (а только производит действия), то получается так:
Place('Вода');
id1.onclick = undefined;
Чтобы функция стала обработчиком, нужно присвоить её саму, а не результат её вызова:
id1.onclick = Place;
Но так, конечно, тоже работать не будет. Теперь нужно прочувствовать этот момент, разобраться до полного понимания, чтобы двигаться дальше.
почему первый код не работает как и второй
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);
});
Фиддл