Как вывести значение переменной javascript в html

Вывести значение переменной в html форме

Как вывести и одновременно передать значение value в форме HTML?
Коллеги, Здравствуйте! Помогите пожалуйста разобраться. Есть кнопка передачи формы в которой два.

Надо вывести название переменной, тип данных переменной, значение переменной
у нас есть переменная int variable = 0; Надо вывести название переменной, тип данных переменной.

Надо вывести название переменной, тип данных переменной, значение переменной
у нас есть переменная int variable = 0; Надо вывести название переменной, тип данных переменной.

Вывод переменной в форме HTML
Как вывести переменную в форме HTML? Что ввести в значении value в HTML скрипте, что бы.

141 / 63 / 11

Регистрация: 19.06.2012

Сообщений: 250

Сообщение было отмечено johny_24 как решение

Решение

var a = 123; document.getElementById('send1').value = a;

Вывод переменной Javascript в текстовую строку.

Вывод переменной Javascript в тектовую строку — это задача, с которой можно столкнуться довольно часто.

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

Можете «поиграть» с этим кодом.

В зависимости от того, какое имя введет пользователь, должно выводиться сообщение:

Привет, Вася! или Привет, Петя!, и.т.д.

Чтобы добиться такого эффекта, нужно объединить текстовую строку «Привет» и переменную, которая будет содержать имя пользователя.

Давайте посмотрим, как это можно сделать на Javascript:

alert( "Привет " + name + "!");

Таким образом, в Javascript символом, который объединяет текстовую строку и переменную является знак «+». Чтобы сообщить о том, что здесь закончился текст и начинается переменная Javascript, нужно открыть и закрыть кавычки.

Больше моих уроков по Javascript здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Переменные в JavaScript. Ввод и вывод информации в JavaScript

Чтобы обрабатывать информацию в JavaScript, используются переменные. С помощью переменных в JavaScript можно получать информацию от пользователя, изменять её и выводить на веб страницу. Чтобы задать переменную в JavaScript используется конструкция
let имя переменной = начальное значение;
Пример числовой переменной в JavaScript
let a = 5;
Пример строковой переменной в JS
let name = «Иван»;
Чтобы поменять значение переменной в JavaScript используется конструкция
имя переменной = значение;
Над числовыми переменными в JavaScript можно применять следующие операции:
+ — сложение
— — вычитание
/ — деление
* — умножение
% — остаток от деления
** — возведение в степень
++ — инкремент
— — декремент
Пример арифметической операции в JS
let a=4;
let b=2;
let c;
c = a+b;

Вывод информации на веб страницу с помощью JavaScript

Чтобы вывести информацию на веб страницу с помощью JavaScript, можно использовать модальное окно alert
alert(информация);
Для вывода значения переменной в JavaScript используется конструкция
alert(переменная);
Для вывода текста в JS используется конструкция
alert(«Текст»);

Код всех примеров необходимо сохранять в файл с расширением js и вызывать этот файл внутри html страницы. Подробнее о вызове javascript в html страницах Пример вывода значения переменной в JavaScript
let a=4;
let b=2;
let c;
c = a+b;
alert(c);

Для вывода текста и значения переменной в JS используется конструкция
alert(‘Текст’+(переменная));
Пример вывода текста и значения переменной в JavaScript
let a=4;
let b=2;
let c;
c = a+b;
alert(‘Сумма ‘+(a)+’+’+(b)+’=’+(c));

Для вывода информации в виде текста в JavaScript используется команда
document.write(информация);
Пример вывода информации в виде текста в JavaScript
let a=4;
let b=2;
let c;
c = a+b;
document.write(‘Сумма ‘+(a)+’+’+(b)+’=’+(c));

Ввод информации в JavaScript

Для ввода информации в JS используется окно ввода информации prompt
переменная= prompt(‘Текст’);
Пример ввода информации в JavaScript
let a=prompt(‘Введите ваше имя’);
let b=prompt(‘Введите ваш возраст’);
document.write(‘Здраствуйте, ‘+(a)+’, вам ‘+(b)+’ лет’);

Часто на веб страницах необходимо ввести числовое значение. Чтобы ввести числовое значение в JavaScript используется следующая конструкция.
переменная = Number(prompt(‘Текст’));
Пример ввода числовых значений в JavaScript
let a=Number(prompt(‘Введите первое число’));
let b=Number(prompt(‘Введите второе число’));
let c;
c = a+b;
document.write(‘Сумма ‘+(a)+’+’+(b)+’=’+(c));

Как вывести результат в 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, с практической информацией, которую я использую в создании сайтов.

Создано 31.12.2018 10:30:00

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

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

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

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

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

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

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

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

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

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

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