Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

output html

output  html

Приветствую вас дорогие друзья. В сегодняшней статье мы рассмотрим интересный тег output с помощью которого можно выводить результат выполнения скрипта. Итак, поехали!

Допустим мы хотим посчитать квадрат введенного в поле числа. Для это мы напишем следующий код.

<input placeholder="Введите число" id="number" type="number" oninput="result.value = number.value * number.value">

<label for="number">Квадрат числа </label>

<output id="result" ></output>

Здесь нас интересуют всего два элемента input(поле для ввода) и output(поле для вывода).

Обратите внимание что само вычисление осуществляется с помощью скрипта при возникновении события input(изменение значения в поле). В итоге для того чтобы произвести вывод в элемент output нам необходимо всего лишь указать идентификатор данного элемента и его свойство value, присвоив всему этому делу итоговое значение.

Как видите весь процесс довольно прост и прозрачен. В результате ввода числа в поле input в теге output у нас выведется его квадрат.

Использование данного тега может быть очень удобно и в следующих ситуациях.

<input type="range" id="range1" min="1" value="50" oninput="output.value= this.value" max="100">
<output id="output">50</output>

К примеру здесь с помощью output мы можем отслеживать текущее значение поля range.

А здесь.

<input type="text" oninput="output2.value = this.value.length">

<label>Количество введенных символов</label>

<output id="output2">0</output>

Динамически производит подсчет введенных пользователем символов в поле.

Или даже так:

<body  onmousemove="result.value = event.clientX  +' : ' + event.clientY">
<output id="result"></output>

С помощью данного поля в наше поле output динамически выводятся текущие координаты курсора мыши.

Как видите грамотное использование данного тега может избавить нас от написания лишнего js кода. Так что пользуйтесь им с умом.

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

вк.

Я с вами прощаюсь. Желаю вам успехов и удачи! Пока.

Оцените статью:

Статьи

Разработки

Комментарии

В данном разделе пока нет комментариев!

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm