Задать вопрос
tixonochek
@tixonochek
Мамкин Программист
javascript

HTML и JavaScript — Как выводить переменную на странице?

Здраствуйте! Мне пришлось регестрироватся на Хабр чтобы задать один вопрос, а именно:
Как выводить переменную на страницу ПОСТОЯННО? Потому что делать это с помощью onclick в кнопке не удобно. Во первых потому что в кнопке это не красиво (выводить какое то значение), во вторых потому что это не то что мне нужно! Получается чтобы обновить свой баланс нужно нажать на кнопку, а это глупо! Почему я не могу выводить переменную cash (у меня она так называется) в заголовок-2<h2>? Потому что я не знаю как! Обрыл все статьи об этом, ничего не работает..

Вот мой код (Кнопка+Заголовок Где я хочу сделать Вывод+КодДжава)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ну Допустим Name</title>
</head>
<body>
  <h2 ontimeupdate="UpdateBalance(this)">Balance (Cash) - 0</h2> <!-- Там где ontimeupdate я пытался сделать событие "Всегда"-->
  <button onclick="OnCashButton()">
    FREE MONEY (CLICK)
  </button>

  <script src="main.js"></script>
</body>
</html>

Это был html, вот main.js:
var cash = 0;
var cashPerClick = 1;


function UpdateBalance(element) {
   element.innerHTML("Balance (Cash) - " + cash)

function OnCashButton() {
    cash += cashPerClick
}


Кому не понятно что у меня вообще за сайт, вот:
Есть кнопка, которая прибавляет 1 к cash
Я хочу: чтобы cash выводился в заголовке-2

В данный момент решение не найдено!
  • Вопрос задан
  • 3608 просмотров
2 комментария
Подписаться 1 Средний 2 комментария
Пригласить эксперта
Ответы на вопрос 2
Igor_307
@Igor_307
Фрилансер
<div class="selector"></div>

element = document.querySelector('.selector');
element.innerHTML = cash; //ваша переменная
Ответ написан
19 комментариев
19 комментариев
@Kosta6808 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ну Допустим Name</title>
</head>
<style>
    .selector{
        font-size: 20pt;
        font-weight: bold;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
<script >
    var cash = 0;
    var cashPerClick = 1;

        function UpdateBalance(){
            cash += cashPerClick;
            document.querySelector(".selector").remove(this);
            let dv = document.createElement('div');
            dv.className = "selector";
            dv.innerHTML = 'Balance (Cash) - ' + cash;
            document.body.append(dv);
        }
</script>

<body>
    <div class = "selector">Balance (Cash) - 0</div>
    <br>
    <button onclick = "UpdateBalance();">
        FREE MONEY (CLICK)
    </button> 
</body>
</html>


Этот код работает в браузере Opera. Если хотите, script вынесите в файл js, как у Вас было. Используется тег div, а не h2, но его вид можно подстроить с помощью style. В selector' е я установил шрифт 20, полужирный.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настроить интеграцию между Voximplant Kit и Dialogflow CX
06 нояб. 2024, в 03:35
5000 руб./за проект
Оптимизация ботов телеграм
06 нояб. 2024, в 00:20
1000 руб./за проект
Смарт-контракт на блокчейне TON
06 нояб. 2024, в 00:03
40000 руб./за проект
Ещё заказы