когда вы задаёте во 2 варианте - вы задаёте функцию, которая вызовется при событии onclick. На данный момент это ссылка на функцию, она не выполняется до onclick.
когда же вы задаётся в 1 варианте - вы эту функцию вызываете сразу. Потому при 3 записи всегда будет последнее значение вызова.
То есть 1 всё равно что 2 записать вот так:
id1.onclick = function() {
document.getElementById('id5').innerHTML = "Вода";
}();
id3.onclick = function() {
document.getElementById('id5').innerHTML = "Берег";
}();
id4.onclick = function() {
document.getElementById('id5').innerHTML = "Суша";
}();
Это ответ на вопрос "почему".
Теперь на ответ "как":
Выше уже сказали - делать правильно через addEventListener:
Что-то типа того:
function clickHandler (event) {
var list = { id1: 'Вода', id4: 'Суша', id3: 'Берег' };
var id = event.currentTarget.id;
document.getElementById(id).innerHTML = list[id];
}
id1.onclick = clickHandler;
id3.onclick = clickHandler;
id4.onclick = clickHandler;
И о том, как для множества:
у вас есть замечательная возможность перебирать нужные элементы в списке. Ищем по необходимым параметрам через querySelectorAll, дале перебираем одним из методов перебора, например forEach, и аналогично под каждый подставляете. Возможно список значений большой и заранее не составить, нам неизвестно какова ваша реальная задача и все условия. Предполагаю, значения и id можно вывести у элементов в data-атрибутах и оттуда брать их, нередко это так и делается.
