Приветствую вас дорогие друзья. В сегодняшней статье мы рассмотрим интересный тег 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 кода. Так что пользуйтесь им с умом.
На этом данная статья подошла к концу. Не забывайте оставлять вопросы в комментариях или группе
вк.Я с вами прощаюсь. Желаю вам успехов и удачи! Пока.
