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

Введение

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

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70812{{"Результат вычислений в HTML"}} html/text_head -.-> lab-70812{{"Результат вычислений в HTML"}} html/embed_media -.-> lab-70812{{"Результат вычислений в HTML"}} html/forms -.-> lab-70812{{"Результат вычислений в HTML"}} html/form_access -.-> lab-70812{{"Результат вычислений в HTML"}} html/inter_elems -.-> lab-70812{{"Результат вычислений в HTML"}} end

Добавьте тег HTML `<output>`

Создайте 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 для генерации результата на основе ввода пользователя. Вы можете использовать элемент вывода для отображения результата вычислений или любых других результатов на своем веб-сайте.

Результат вычислений в HTML