Главная » Языки программирования

FlashNews!

На чтение 6 мин
Содержание
  1. Получить значение value из тега input | JavaScript
  2. document.getElementById() — поиск по тегу с атрибутом id
  3. document.getElementsByName() — поиск по NodeList тегов с атрибутом name
  4. document.getElementsByClassName() — поиск по NodeList тегов с атрибутом class
  5. document.body — поиск по тегу body
  6. document.getElementsByTagName() — поиск по NodeList тегов
  7. document.querySelector() — поиск по селектору
  8. document.querySelectorAll() — поиск по NodeList селекторов
  9. 11 комментариев:
  10. Получаем данные из поля ввода с помощью input.value
  11. Как получить input в JavaScript (1 часть)
  12. HTML разметка
  13. Умножение чисел
  14. Что мы хотим получить в итоге?
  15. Событие JavaScript
  16. Функция на JavaScript
  17. JS получить значение input
  18. Расшифровывается метод так:
  19. Что такое переменная
  20. Комментарии ( 2 ):

Получить значение value из тега input | JavaScript

document.getElementById() — поиск по тегу с атрибутом id

id на веб-странице может быть присвоен только один раз одному тегу HTML Задача: нужно вывести значение выбранного цвета рядом с полем ввода: 

idColor" placeholder="введите текст"/> rezultatColor">

document.getElementsByName() — поиск по NodeList тегов с атрибутом name

Задача: прибавить значение только третьего включенного чекбокса, округлить до сотых и показать в формате 0.00 (с двумя знаками после запятой):
1.00

name="nameCheckbox" value="1"/> name="nameCheckbox" value="20"/> name="nameCheckbox" value="300.555" onclick="onclickCheckbox()"/> name="nameCheckbox" value="400"/> 1.00  Пояснения: имеется четыре тега input с name="nameCheckbox". [0] - это первый по счёту, соответственно, [2] будет третьим.
nameRadio" value="1" checked="checked"/> nameRadio" value="20"/> nameRadio" value="300"/> nameRadio" value="400"/> 1

document.getElementsByClassName() — поиск по NodeList тегов с атрибутом class

 .classGreen < background: green; width: 130px; height: 130px; margin: 0 auto; transition: .5s; >.classRed 
class="classGreen">

document.body — поиск по тегу body

document.body.innerHTML = document.body.innerHTML.replace(/\u003Ch2/g, '\u003Ch3');" /> Пояснения: я меняю , потому что тег может содержать атрибуты.  пишу как специальный символ в JavaScript \u003C.

document.getElementsByTagName() — поиск по NodeList тегов

h3')[4].innerHTML = 'Скрипт сработал\(\)'"/> Скрипт сработал\(\) - это то, на что мы заменяем наш текст. Он выглядит как Скрипт сработал(). Куда же делись символы \? Они реализуют экранирование скобок, чтобы те были рассмотрены как текстовые символы, а не как код скрипта. 
 Li(); setInterval(Li,1000); function Li() < d = new Date(); var month=new Array("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"); var week=new Array("воскресенье","понедельник","вторник","среда","четверг","пятница","суббота"); document.getElementById('d').getElementsByTagName('li')[0].innerHTML='Дата: '+d.getDate()+' '+month[d.getMonth()]+' '+d.getFullYear()+' года, '+week[d.getDay()]; document.getElementById('d').getElementsByTagName('li')[1].innerHTML='Время: '+((d.getHours()

document.querySelector() — поиск по селектору

Задача: показать степень заполнения полей, пароль и email должен быть внесён правильно.
Почта
Пароль 

 input:focus:invalid < border: 1px solid #eee; >input:invalid Почта  
Пароль " title="Не менее 6 знаков, в том числе хотя бы одна цифра и буква" onchange="oninputEmail()"/> 
0%

document.querySelectorAll() — поиск по NodeList селекторов

Помните этот пример? Там поиск идёт только по h3. Именно на него произойдет замена по этой кнопке. Если её не нажимать, то скрипт не будет работать. А вот так будет и при h2, и при h3

h2, h3')[4].innerHTML = 'Скрипт сработал\(\)'"/>

11 комментариев:

Анонимный Здравствуйте!
У меня вот такой вопрос. Не подскажите.
Есть 2 поля и две кнопки.
Я хочу VALUE кнопок передать в поля.

Просто значение например 1 кнопки передать в 1 поле понятно. Но хотелось бы. Что бы в поле попадало значение кнопки которую нажал. Не важно 1 или 2 или 11.

Вот что-то начал но дальше…

form
input type=»text» value=»1″
input type=»text» value=»2″
/form

input name=»poga2″ type=»button» value=»L» onclick=»q.value = fun()»
input name=»poga3″ type=»button» value=»M»

script
function fun() var per1=document.getElementById(‘q’).value;
var per2=document.getElementById(‘x’).value;

/script
Буду очень благодарен за подсказку.
До свидания.
NMitra Здравствуйте, пример http://jsfiddle.net/NMitra/dhj7epc4/

Анонимный Здравствуйте!
Спасибо Вам за ответ. Спасибо за помощь.
Анонимный Здравствуйте!
Подскажите как перебрать список с помощью javascript :
ul
li1/li
li2/li
li3/li
li4/li
li5/li
li6/li
li7/li
/ul

script
var el = document.querySelector(‘li’);

Источник

Получаем данные из поля ввода с помощью input.value

Мы научились с помощью скрипта изменять текст на странице, когда пользователь отправляет форму. У нас это форма подписки на рассылку, и нам нужно сообщить пользователю, что он успешно подписался. Сообщение будет выглядеть так:

Адрес e-mail добавлен в список получателей рассылки.

Адрес электронной почты в сообщении должен быть тем, который введёт пользователь. Как его получить?

Нам поможет особое свойство, которое есть у полей ввода, — value . Допустим, на странице есть поле ввода input :

Босс проходил мимо и ввёл туда своё имя — Кекс. С помощью свойства value мы можем получить данные из этого поля ввода. А после, например, вывести их в консоль:

let input = document.querySelector('input'); console.log(input.value); // Выведет: Кекс

А ещё мы можем вывести данные из поля ввода прямо на страницу. Представим, что у нас на странице есть абзац, который мы нашли и сохранили в переменную paragraph . Мы можем сделать так:

paragraph.textContent = input.value;

И теперь то, что ввёл пользователь в поле input , отобразится на странице как текстовое содержимое элемента paragraph .

В нашем случае пользователь вводит свой адрес в поле с классом subscription-email . Найдём его и скажем JavaScript вывести полученные данные на страницу.

Почему бы не прочитать текст из поля ввода с помощью textContent ? Если мы попытаемся это сделать, то получим пустую строку. Для JavaScript поля формы не имеют текстового содержимого, их значения хранятся именно в value .

На главную

email

Новая библиотека для создания графиков

Теперь вы можете создать дашборд за считанные секунды.

Что там у роботов?

В робототехнике происходит много интересного, эта новость могла бы быть об этом, но нет.

© FlashNews!

let page = document.querySelector(‘.page’); let themeButton = document.querySelector(‘.theme-button’); themeButton.onclick = function() < page.classList.toggle('light-theme'); page.classList.toggle('dark-theme'); >; let message = document.querySelector(‘.subscription-message’); let form = document.querySelector(‘.subscription’); // Объявите переменную здесь form.onsubmit = function(evt) < evt.preventDefault(); // Измените значение textContent на следующей строке message.textContent = 'Форма отправлена!'; >;

Спасибо! Мы скоро всё исправим)

Источник

Как получить input в JavaScript (1 часть)

Как получить input в JavaScript (1 часть)

На этом уроке мы научимся получать значения, введенные пользователями в поле input и совершать с ними арифметические действия.

HTML разметка

Возьмем за основу бутстраповскую разметку (getbootstrap.com), из раздела Components / Forms. У нас должна получиться форма с двумя полями для ввода чисел и кнопка. Сделаем тип полей у инпутов текстовым, для возможности ввода, как чисел, так и строк.

Умножение чисел

Для того чтобы обратиться конкретно к элементу input на языке JavaScript, нам нужно к этому элементу добавить уникальный идентификатор. Зададим двум полям input два разных идентификатора: inp_1 / inp_2. На одной странице не может быть двух одинаковых id. Иными словами, функция JS, может обратиться к input, только через название id.

Что мы хотим получить в итоге?

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

Событие JavaScript

Для того, чтобы при нажатии на кнопку что-то срабатывало, добавим событие onclick, при клике будет выполняться функция multi() (произвольное название), круглые скобочки обязательны. Они указывают, что это функция.

Как получить input в JavaScript.

Итак, у нас появилась форма, куда можно вводить числа, однако клик по кнопке ничего не дает. Пора заняться непосредственно программированием на JS.

Функция на JavaScript

Между тегами script напишем функцию function и название её multi(), затем внутри фигурных скобочек, пропишем выражение, результат которого, увидим на всплывающем окне alert.

JS получить значение input

Надо вывести результат умножения двух чисел в окне alert, но мы не знаем какие числа пользователь ввел, эти данные надо узнать. Для этого, внутри круглых скобочках alert, обращаемся к элементам input, через метод document.getElementById().

Расшифровывается метод так:

В текущем документе получить элемент по id. Этот метод получает весь элемент input, с классами, типом полей, а нам надо узнать только число, введенное пользователем в поле input — значение value.

Получить элемент с id inp_1 и из него вытащить только то, что ввел пользователь. Точно так же, вытаскиваем число и из второго поля.

Таким образом, JavaScript узнает числа, введенные пользователем, умножает их и выдает готовый результат в окне alert, после того, как пользователь кликнет по кнопке.

Как получить input в JavaScript.

Команда alert помогает разработчику, отлаживать код, находить ошибки в процессе разработки.

Что такое переменная

Это выражение прекрасно делает свою работу, но при каждом обращении к нему, нам надо переписывать его в таком длинном виде. Это неудобно, код в документе разрастается и становится трудночитаемым. Было бы удобно всю эту длинную запись целиком поместить в маленькую ячейку, на хранение, чтобы вытаскивать оттуда данные, когда потребуется. Такие ячейки и называются в программировании переменными.

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

Создано 28.12.2018 10:16:00

  • Михаил Русаков

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

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

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

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

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

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

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

    а как приплюсовать например на моем личном сайте хотелось бы сделать чтоб сумма считалось при заполнении http://manyk.ru/

    вместо умножения ставлю + не работает мне надо для моего сайта сделать чтоб определить сумму стоимость работ и вывести на сайт http://manyk.ru/

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

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

    Источник

    Читайте также:  Mail test
    Оцените статью