Для реализации данной функциональности в JavaScript, вам понадобятся HTML, CSS и JavaScript. Вот пошаговая инструкция:
1. Создайте HTML-разметку:
<!DOCTYPE html>
<html>
<head>
<title>Incrementing Value</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<button id="incrementButton">Увеличить значение</button>
<div id="output"></div>
<script src="script.js"></script>
</body>
</html>
2. Определите стили CSS в файле styles.css, чтобы установить внешний вид кнопки и вывода:
#incrementButton {
font-size: 16px;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
}
#output {
font-size: 18px;
margin-top: 20px;
}
3. Создайте JavaScript-файл script.js и добавьте следующий код:
// Получаем ссылку на кнопку и на элемент вывода
const incrementButton = document.getElementById('incrementButton');
const output = document.getElementById('output');
// Устанавливаем начальное значение
let value = 0;
// Обработчик события для нажатия кнопки
incrementButton.addEventListener('click', () => {
// Увеличиваем значение на 1
value++;
// Выводим текущее значение
output.innerHTML += Значение: ${value}<br/>;
});
4. Откройте HTML-файл в браузере и нажмите на кнопку "Увеличить значение". Вы должны увидеть поэтапный вывод строк, в которых значение увеличивается на 1.
Обратите внимание, что каждый раз при нажатии на кнопку текст будет добавляться к списку уже существующих строк вывода. Если вам нужно очищать вывод перед добавлением новой строки, просто добавьте следующую строку перед выводом значения:
output.innerHTML = '';
Это позволит очищать блок вывода перед каждым новым выводом значения.