Пример работы с событием onclick на Javascript.

В предыдущих видео нам уже не раз приходилось работать с событием onclick, поэтому я хотел предложить для вас небольшое задание. С его помощью вы можете попробовать свои силы в написании Javascript кода.

Предположим, что у нас есть 3 кнопки (Надпись 1, Надпись 2, Надпись 3 см. видео).

Задача следующая: сделать так, чтобы при клике по кнопке "Надпись 1" над этими кнопками у нас бы появилась "Надпись 1", при клике по "Надпись 2" она бы менялась на  "Надпись 2" и.т.д.

Попробуйте самостоятельно написать код для этой программы и после этого уже посмотреть мой вариант решения.

Итак, вот мое решение:

<div id="content">
</div>
<button id="button1">Надпись 1</button>
<button id="button2">Надпись 2</button>
<button id="button3">Надпись 3</button>

Вот такая HTML-структура получилась для нашего примера. И теперь задача оживить эти кнопки и заставить, чтобы они срабатывали при клике по ним.

Вот такой простой код я создал:

<script>
    button1.addEventListener('click', function() {
        content.innerHTML = "Надпись 1";
});
button2.addEventListener('click', function() {
        content.innerHTML = "Надпись 2";
});
button3.addEventListener('click', function() {
        content.innerHTML = "Надпись 3";
});
</script>

Для каждой кнопки я создал слушатель событий. При клике по каждой кнопке срабатывает функция, которая меняет содержимое HTML элемента с id="content". Его внутреннее HTML-содержимое на "Надпись 1", "Надпись 2" и "Надпись 3".

Вот такое решение. Ничего сложного здесь нет и надеюсь, что у вас получилось это реализовать. Как один из вариантов решения этой проблемы, можно рассмотреть такой код.