Как вывести переменную javascript

Вывод данных 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():

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

Источник

How to display JavaScript variable value in HTML

This tutorial will show you how to use all three ways to display JavaScript variables in HTML pages. Let’s start with using document.write() method.

Display JavaScript variable using document.write() method

The document.write() method allows you to replace the entire content of HTML tag with HTML and JavaScript expressions that you want to be displayed inside the tag. Suppose you have the following HTML element:

When you run document.write("Hello") method on the HTML piece above, the content of will be replaced as follows:

 Knowing this, you can display any JavaScript variable value by simply passing the variable name as the parameter to document.write() method:

The document.write() method is commonly used only for testing purposes because it will delete any existing HTML elements inside your tag. Mostly, you would want to display a JavaScript variable beside your HTML elements. To do that, you need to use the next method.

Display JavaScript variable using innerHTML property.

Every single HTML element has the innerHTML property which holds the content of that element. The browser allows you to manipulate the innerHTML property by using JavaScript by simply assigning the property to a different value.

For example, imagine you have the following HTML tag:

 You can replace the content of 
tag by first retrieving the element using its identifier. Since the element 
has an id attribute with the value of greeting , you can use document.getElementById method to retrieve it and change its innerHTML property.

The content of 
tag will be changed as follows:

Knowing this, you can simply wrap the space where you want your JavaScript variable to be displayed with a element as follows:

The code above will output the following HTML:

And that’s how you can display JavaScript variable values using innerHTML property.

Display JavaScript variable using window.alert() method

The window.alert() method allows you to launch a dialog box at the front of your HTML page. For example, when you try running the following HTML page:

The following dialog box should appear in your browser:

The implementation for each browser will slightly vary, but they all work the same. Knowing this, you can easily use the dialog box to display the value of a JavaScript variable. Simply pass the variable name to the alert() method as follows:

 The code above will launch a dialog box that displays the value of the name variable.

Conclusion

Displaying JavaScript variables in HTML pages is a common task for web developers. Modern browsers allow you to manipulate the HTML content by calling on exposed JavaScript API methods.

The most common way to display the value of a JavaScript variable is by manipulating the innerHTML property value, but when testing your variables, you can also use either document.write() or window.alert() methods. You are free to use the method that suits you best.

Learn JavaScript for Beginners 🔥

Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.

A practical and fun way to learn JavaScript and build an application using Node.js.

About

Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.

Search

Type the keyword below and hit enter

Tags

Click to see all tutorials tagged with:

Источник

Переменные в 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));

Источник

Как вывести переменную из js в html

В самом простом случае, сначала необходимо в html документе дать элементу в который будем помещать данные — id или класс. Например:

    Chair The Laid back     Heigth 80 cm  id="testData">    

Затем, ниже объявленного искомого объекта, в теле тега необходимо с помощью JavaScript «получить» объект и занести в свойство textContent необходимые данные.

 type="text/javascript"> const data = 'new_test_data'; document.getElementById("testData").textContent = data;  

Источник