Как отобразить переменную JavaScript в HTML?

Web Frontend: JavaScript, HTML/CSS
#1

У меня есть переменные в JavaScript и мне нужно чтобы они отображались на сайте.

var login = document.getElementById("login").value
var password = document.getElementById("password").value
var repassword = document.getElementById("repassword").value

Можно ли отобразить эти переменные в html коде что-то типа

<h1>"login"</h1>

Подскажите способы которыми можно можно это сделать. Заранее спасибо.

#2

Например взять элемент и записать что надо в .innerHTML Element.innerHTML - Web APIs | MDN

#3 
const textElement = document.querySelector ('.login');
const textElement = textElement.innerHTML;

textElement.innerHTML = login;

Попытался сделать с помощью этого способа почему-то не сработало. Может есть какая-та ошибка?

#4

Так посмотрите в консоли браузера.

#5

Выдаёт эту ошибку:
Uncaught SyntaxError: Identifier ‘textElement’ has already been declared

#6

Так а зачем это?

#7

Короче вот что получилось: я удалил это строку и всё заработало.

const textElement = document.querySelector ('.login');
textElement.innerHTML = "login";

Но это работает только с текстом при выводе переменной консоль выдаёт эту ошибку:
Uncaught ReferenceError: login is not defined at

#8

Всё заработало. Теперь после регистрации на сайте будет отображаться введённый логин пользователя.

function reg() {
    var login = document.getElementById("login").value
    var password = document.getElementById("password").value
    var repassword = document.getElementById("repassword").value
    
    const textElement = document.querySelector ('.login');
    textElement.innerHTML = login;
}

Вот html код

<h1 class="login" ></h1>

@AlexP Спасибо за предоставленный ресурс.