Для реализации такой функциональности вам потребуется использовать HTML для разметки страницы и JavaScript для обработки событий клика по кнопкам и обновления текста в элементе. Ниже приведен пример того, как это можно сделать.
1. Создайте HTML-структуру с 4 кнопками и элементом, в котором будет отображаться текст (например, с использованием тега `<a>`).
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Смена текста</title>
<script src="script.js" defer></script>
</head>
<body>
<button id="btn1">Кнопка 1</button>
<button id="btn2">Кнопка 2</button>
<button id="btn3">Кнопка 3</button>
<button id="btn4">Кнопка 4</button>
<a id="text-element">Изначальный текст</a>
<script>
// Ваш JavaScript код будет здесь
</script>
</body>
</html>
```
2. Используйте JavaScript для присваивания обработчиков событий каждой кнопке. Когда пользователь нажимает на кнопку, текст элемента `a` будет меняться.
```javascript
// Получение ссылки на текстовый элемент
var textElement = document.getElementById('text-element');
// Функция для смены текста
function changeText(newText) {
textElement.textContent = newText;
}
// Назначение обработчиков событий для кнопок
document.getElementById('btn1').addEventListener('click', function() {
changeText('Текст для кнопки 1');
});
document.getElementById('btn2').addEventListener('click', function() {
changeText('Текст для кнопки 2');
});
document.getElementById('btn3').addEventListener('click', function() {
changeText('Текст для кнопки 3');
});
document.getElementById('btn4').addEventListener('click', function() {
changeText('Текст для кнопки 4');
});
```
В этом примере мы используем метод `document.getElementById` для получения элементов по их идентификаторам и затем присваиваем анонимные функции с методом `addEventListener` для обработки событий клика. Каждая из этих функций вызывает функцию `changeText`, передавая ей новое значение текста для элемента `a`.
Если вы хотите изменить не просто текст, а числа, предполагая счетчики или другую логику изменения, то подход будет аналогичным. Пример изменения может быть таким:
```javascript
// Предположим, у вас есть начальные значения для чисел
var numbers = [0, 0, 0, 0];
function changeNumber(buttonIndex, newValue) {
numbers[buttonIndex] = newValue;
textElement.textContent = numbers.join(' '); // объединяем числа в одну строку с пробелами
}
// И тут ваш код для назначения обработчиков, где вы вызываете changeNumber
// с соответствующим индексом кнопки и новым значением числа
```
Этот пример показывает, как можно сохранять и изменять числовые значения в массиве и отображать их в текстовом элементе.
