Результат вычислений в HTML: научитесь использовать тег <output>

Введение

Тег <output> - это новый контейнерный элемент в HTML5. Он обычно используется для отображения результата любых вычислений на веб-сайте/приложении.

В этом пошаговом практическом занятии вы научитесь создавать контейнер для результата с использованием тега <output> в HTML.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Добавьте тег HTML

Создайте HTML-файл с именем index.html на своем компьютере.

Добавьте тег <output> в раздел <body> вашего HTML-файла.

<body>
  <h1>Контейнер для результата</h1>
  <output></output>
</body>

Добавьте элементы ввода

Создайте элементы ввода, такие как текстовое поле или кнопка, которые можно использовать для генерации результатов в элементе вывода. Определите атрибут for, описывающий связь между элементом вывода и элементом ввода.

<body>
  <h1>Контейнер для результата</h1>
  <input type="text" id="number1" />
  <input type="text" id="number2" />

  <button onclick="calculateResult()">Вычислить</button>

  <output for="number1 number2"></output>
</body>

Напишите функцию JavaScript

Напишите функцию JavaScript для генерации результата на основе ввода пользователя.

<script>
  function calculateResult() {
    // Получите значения, введенные пользователем
    var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;

    // Сохраните результат операции
    var result = parseInt(num1) + parseInt(num2);

    // Отобразите результат в элементе вывода
    document.querySelector("output").value = result;
  }
</script>

После написания HTML и JavaScript откройте HTML-файл в вашем веб-браузере и протестируйте контейнер для результата.

Введите два числа в поля ввода и нажмите кнопку "Вычислить". Сумма этих чисел должна быть отображена в элементе вывода.

Резюме

Поздравляем, вы успешно создали контейнер для результата с использованием тега <output> в HTML. В этом практическом занятии вы узнали, как добавить элементы ввода и написать функцию JavaScript для генерации результата на основе ввода пользователя. Вы можете использовать элемент вывода для отображения результата вычислений или любых других результатов на своем веб-сайте.