Вывести значение элемента html

Как вывести результат в JavaScript (2 часть)

Объявление переменных

Для того, чтобы объявить в JavaScript переменную, пишут так:
var name;
где name – осмысленное название переменной, написанное латиницей
var multi_1; — мы объявляем переменную, говорим что у нас есть пустая ячейка

и туда надо что-то положить (присвоить).

Положим туда число, которые вводит пользователь. Переменной multi_1 присвоена запись, теперь в multi_1 лежит число, которое ввел пользователь.

Объявим вторую переменную и положим туда число, введенное пользователем во второй input.

var multi_2;
multi_2 = document.getElementById(‘inp_2’).value;

После введения в документ переменных, больше нет нужды писать длинные выражения, они будут написаны только один раз – первый. Заменим наше громоздкое выражение переменными. Вот так:

В ходе работы мы можем менять содержимое переменных — объявлять новое значение переменной, тогда старое содержимое переменной автоматически перезапишется на новое.

Также можно одновременно и объявлять переменную и присваивать ей значение. Эта запись

var multi_1 = document.getElementById(‘inp_1’).value;

равносильна этой записи.

var multi_1;
multi_1 = document.getElementById(‘inp_1’).value;

Нежелательно раскидывать объявление переменных по всему коду, можно перечислить все вводимые переменные через запятую в начале скрипта, добавляя их туда по ходу написания кода.

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

Тип переменных

Положить в ячейку можно не только выражение, но и числа, строки, функции. В JavaScript коде, не нужно указывать тип переменных, строки надо заключать в кавычки.

var test = ‘Hello baby’;

Операции с переменными

С переменными можно производить различные математические действия: сложение, вычитание, деление и.т.д.

var number1 = 10;
var number2 = 20;
alert(number1+number2);

Ошибки в переменной

Если значение переменной number1 оставить пустым, то в консоли разработчика или в окошке alert, появиться ошибка NaN – не число. Нельзя число 20 сложить неизвестно с чем и ждать результата.

При попытке просто вывода пустой переменной, мы увидим undefined. Это предупреждение, что содержимое ячейки number1 не определено. В консоли разработчика, можно видеть все ошибки по JavaScript, но бывает так, что ошибок нет, а скрипт не работает. В таком случае надо искать причину в HTML/CSS коде, других вариантов нет.

Вывод результата

После тега hr, добавим в HTML разметку span, куда выведется результат умножения двух чисел.

На данный момент результат мы видим только в окошке alert, но хотим увидеть его на странице в теге span.

function multi() <
var multi_1, multi_2;
multi_1 = document.getElementById(‘inp_1’).value;
multi_2 = document.getElementById(‘inp_2’).value;
alert(multi_1*multi_2);
>

Нам надо убедиться, что мы имеем дело с числами, поэтому сделаем проверку.

multi_1 = parseInt (multi_1);
multi_2 = parseInt (multi_2);

parseInt – это функция, которая проверяет содержимое input и если потребуется преобразование в число, то сделает это. Если пользователь случайно введет, число 10.5 или 10d, то функция сама обрежет до целого числа. Нам нужны числа, а не строки.Необходимо создать ещё одну переменную. назовем её result и присвоим значение умножения. В ячейке result будет храниться результат умножения двух чисел.

var result;
result = multi_1*multi_2;

Вернемся к тегу span, где планируется вывод результата умножения. Мне надо получить элемент span c id result_multi, мы получаем весь элемент span со всеми его свойствами.

Но мне нужно только одно значение, которое отвечает за то, что будет выводиться между парными тегами span, за это отвечает свойство innerHTML.

При выполнении этой команды, браузер найдет элемент с указанным id и внутри тега span, выведет значение переменной result.

Перед начинающим веб-разработчиком не стоит вопрос – изучать или не изучать JavaScript. Вопрос лишь в том, как максимально эффективно это делать, чтобы после изучения, можно было бы легко применять свои полученные знания на практике? Дело в том, что я разработал уникальный видео-курс по JavaScript, с практической информацией, которую я использую в создании сайтов.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

Работа с элементами страницы в JavaScript

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

Разное

Работа с канвасом

Практика

Контекст

Drag-and-Drop

• Урок №
  Введение
  в ООП в стиле ES6
• Урок №
  Основы
  работы с ООП
• Урок №
  Наследование
  классов в JavaScript
  Продвинутая работа
  с классами на JavaScript —>
• Урок №
  Применение
  ООП при работе с DOM
• Урок №
  Практика
  по ООП в JavaScript
• Тут скоро будут еще уроки
  по функциональному и прототипному
  стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

В данном уроке мы разберем работу с элементами страницы на языке JavaScript.

Работа с innerHTML, outerHTML

В прошлом уроке мы с вами учились считывать и записывать значения атрибутов, а теперь будем делать тоже самое, но уже со внутренним содержимым тегов. Это делается с помощью свойства innerHTML, которое можно считывать и перезаписывать, меняя тем самым содержимое тегов.

В примере ниже у нас есть абзац. Давайте сменим ему текст с помощью свойства innerHTML. Для этого получим ссылку на этот абзац с помощью getElementById в переменную elem. Затем таким образом — elem.innerHTML = ‘Новый текст’ — запишем в него новый текст:

HTML код станет выглядеть так:

Можно записывать не только текст, но и теги и они будут работать (в нашем случае текст станет жирным):

HTML код станет выглядеть так:

Кроме свойства innerHTML существует также свойство outerHTML, которое перезаписывает не только внутренний текст тега, но и сам тег. Смотрите пример:

HTML код станет выглядеть так:

Как вы видите, наш абзац исчез и заменился на тег b.

Работа с getElementsByTagName

Во всех примерах выше мы с вами работали с методом getElementById, который получал только одно свойство по его атрибуту id. Однако существуют и другие способы получения свойств, к примеру, с помощью метода getElementsByTagName, который получает группу тегов по их имени. Например, можно получить все абзацы p или все заголовки h2.

Учтите только один нюанс — наш метод возвращает не одно свойство, а массив свойств. Получим, к примеру, все абзацы в переменную elems:

В переменной elems теперь лежит массив свойств, это значит, что elems[0] — это первый абзац, elems[1] — второй и так далее (нумерация с нуля).

Мы можем убедится в этом, если сделаем так: elems[0].innerHTML = ‘!’ — в этом случае первый абзац сменит свой текст.

Давайте поменяем текст всех трех абзацев:

HTML код станет выглядеть так:

Учтите, что менять одновременно все свойства как-нибудь так elems.innerHTML = ‘!’ не получится (потому что elems — массив). Необходимо или вручную перебрать все свойства, как это сделано в примере выше, или воспользоваться циклом.

В следующем примере мы сменим содержимое всех абзацев на страницы на ‘!’, воспользовавшись для этого циклом for:

HTML код станет выглядеть так:

Обращение к свойствам через свойства document

Некоторые теги страницы можно не получать методами типа getElementById, а обратиться к ним как свойствам объекта document. К примеру, к тегу можно обратиться так: document.body, а к тегу — вот так: document.head. Такое работает не для всех тегов, а только для избранных.

Учтите, что нельзя получить доступ к тому свойству, которого еще не существует в момент выполнения скрипта. Поэтому, если скрипт находится в , то в нем недоступен document.body.

В следующем примере первый alert выведет null:

Работа с формами

Можно получить все HTML формы на странице через document.forms. В результате мы получим массив форм, будто он был получен с помощью getElementsByTagName (точнее это будет не массив, а псевдомассив (или коллекция) свойств).

Мы можем, к примеру, обратиться к любой форме, как к энному свойству массива, например, к форме с номером 0:

HTML код станет выглядеть так:

А можем перебрать все формы с помощью цикла:

HTML код станет выглядеть так:

Следующем образом — document.forms[i].elements — можно найти общее количество форм на странице.

Кроме того, к формам можно обращаться по имени вместо номера. Это имя задается в атрибуте name тега

Источник

Вывод данных Javascript

У JavaScript есть несколько различных способов «отобразить» данные:

• Запись в HTML элемент при помощи свойства innerHTML.
• Запись в вывод HTML при помощи метода document.write().
• Запись в окно предупреждений при помощи метода window.alert().
• Запись в консоль браузера при помощи метода console.log().

Использование innerHTML

Чтобы получить доступ к HTML элементу, JavaScript должен воспользоваться методом document.getElementById(id). Атрибут id определяет идентификатор HTML элемента. Свойство innerHTML определяет выводимый HTML контент:

Изменение свойства innerHTML элемента HTML это обычный способ вывода данных в HTML.

Использование document.write()

В тестовых целях для вывода данных можно использовать метод document.write():

Следует помнить, что использование метода document.write() после полной загрузки HTML документа удалит весь существующий HTML код:

Метод document.write() следует использовать только для тестирования.

Использование window.alert()

Для отображения данных также можно использовать окно сообщений. Для этого нужно воспользоваться методом window.alert():

Использование console.log()

Во время отладки скрипта, чтобы увидеть некие данные, вы можете вывести их в консоль браузера. Для этого используется метод console.log():

Подробнее об отладке скриптов будет рассказано в следующих главах.

Источник

Работа с HTML, текстом и атрибутом value в jQuery

Статья, в которой рассмотрим, какие в jQuery есть методы для чтения и изменения содержимого HTML элементов.

В jQuery имеются три метода, которые позволяют напрямую работать с контентом элемента:

• html – для чтения и изменения HTML содержимого элемента;
• text – для чтения и изменения текстового содержимого элемента;
• val – для чтения и изменения значения элементов формы.

Чтение HTML контента элемента

Например, получим HTML содержимое элемента с идентификатором ( id ) contact :

Если выборка содержит несколько элементов, то данный метод вернёт HTML контент только первого элемента:

Для того чтобы получить HTML контент всех найденных элементов необходимо воспользоваться циклом (например, each ):

Изменение HTML контента элемента

Например, заменим содержимое элемента ul :

Если на странице будет несколько элементов ul , то данный метод заменит содержимое каждого из них.

Если необходимо изменить контент только у одного элемента на странице, то наиболее просто это сделать через id .

Использование функции для замены HTML контента элемента:

Например, изменим контент элементов (зачеркнём старый контент и добавим рядом новый):

Получение текстового содержимого элемента

В jQuery получение содержимого элемента в виде обычного текста осуществляется с помощью метода text . При этом все HTML теги, если они присутствуют в контенте, будут вырезаны.

Например, получим текстовое содержимое элемента p и выведем его в контент другого элемента:

Метод text также как и html возвращает содержимое только первого элемента выборки (если в ней присутствуют несколько элементов).

Замена контента элемента указанным текстом

Метод text может использоваться не только для чтения, но и для изменения содержимого указанного элемента. При этом HTML теги (если они присутствуют в тексте) будут закодированы с помощью спецсимволов.

После выполнения, элемент div с классом info будет иметь следующий HTML код:

На экране данный элемент будет выглядеть так:

Если в выборке присутствует несколько элементов, то метод text заменит содержимое каждого из них:

Использование в качестве параметра метода text функции (добавим в скобках к содержимому каждого выбранного элемента длину его текстовой информации):

Удаление контента элемента

В jQuery для удаления содержимого элемента имеется метод empty . Данный метод не только удаляет элементы, но и другие его дочерние узлы, включая текст.

Например, удалим содержимое всех элементов с классом vote :

Получение значения элемента формы

В jQuery чтение значений элементов input , select и textarea осуществляется посредством метода val .

Например, получим значение элемента input :

Метод val , если в коллекции присутствует несколько элементов, вернёт значение только первого из них.

Для получения значения выбранного элемента ( select , checkbox , или radio кнопок) используйте :checked .

Если коллекции нет элементов, то метод val возвращает значение undefined .

Например, получим значение элемента textarea , имеющего имя description :

Получим значение элемента select :

Если элемент select имеет множественный выбор (атрибут multiple ), то метод val возвратит в качестве результата массив, содержащий значение каждой выбранной опции ( option ). Если ни одна опция не отмечена, то данный метод вернёт в качестве ответа пустой массив (до версии jQuery 3 значение null ).

Установка значения элементу формы

Изменение значения элемента формы в jQuery осуществляется с помощью метода val .

Например, при клике на кнопку установим элементу input её текст:

Данный метод устанавливает значение для всех элементов набора, к которому он применяется.

Например, преобразуем все буквы значения элемента input после потеря фокуса в прописные:

Например, поменяем значение элемента select :

Например, присвоим значения элементу select с множественным выбором ( multiple ):

Источник