Как обновить текст в окне, используя .innerHTML - PullRequest
Новая
       11

Как обновить текст в окне, используя .innerHTML

0 голосов
/ 28 августа 2018

Я делаю очень простую страницу, которая просто подсчитывает, сколько секунд у пользователя была открыта вкладка. В консоли обновляются секунды, но на странице в браузере это не так. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Counter</title>
    <script type="text/javascript">
      window.seconds = document.getElementById('counts');
      var count = setInterval('counter()', 1000);

      function counter(){
        console.log(seconds)
        document.getElementById('counts').innerHTML = window.seconds + 1;
      }

    </script>
    <style>
      h2 {
        text-align:center;
        color:#032441;
        font-family:monospace;
      }
      div {
        text-align:center;
        color:#032441;
        font-size:70px;
        font-family:monospace;
      }
    </style>
  </head>

  <body>
    <script>
      document.body.style.backgroundColor = "#EBE9BD"
    </script>

    <h2>
      You have been on this page for
    </h2>
    <div id="counts">
      0
    </div>
    <h2>
      seconds.
    </h2>

  </body>
 </html>

В чем проблема?

Ответы [ 3 ]

0 голосов
/ 28 августа 2018
  1. Переменная seconds объявляется слишком рано, даже до того, как элемент отображается, поэтому я добавил оболочку window.onload в ваш код.
  2. Вам необходимо использовать innerHTML, чтобы изменить содержимое элемента div.
  3. Не связано, но вы также можете стилизовать тег body с помощью правила CSS. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Counter</title>
    <script type="text/javascript">
      window.onload = function () {
        var seconds = document.getElementById('counts');
        var count = setInterval(counter, 1000);

        function counter(){
          var newCount = Number(seconds.innerHTML) + 1
          console.log(newCount);
          seconds.innerHTML = newCount;
        }
      }
    </script>
    <style>
      body {
        backgroundColor: "#EBE9BD";
      }
      h2 {
        text-align: center;
        color: #032441;
        font-family: monospace;
      }
      div {
        text-align: center;
        color: #032441;
        font-size: 70px;
        font-family: monospace;
      }
    </style>
  </head>

  <body>
    <h2>
      You have been on this page for
    </h2>
    <div id="counts">
      0
    </div>
    <h2>
      seconds.
    </h2>
  </body>
</html>
0 голосов
/ 28 августа 2018

Вы можете использовать следующее: 

<script type="text/javascript">
    window.seconds = document.getElementById('counts');
    setInterval('counter()', 1000);

    function counter(){
        console.log(seconds.innerHTML);
        window.seconds.innerHTML++;
    }
</script>

Имейте в виду, что 'count' еще не определен после запуска скрипта.

0 голосов
/ 28 августа 2018

Чтобы получить доступ к «телу» Элемента, вы должны получить к нему доступ через element.innerHTML, который в вашем случае будет выглядеть как window.seconds.innerHTML = window.seconds.innerHTML + 1

РЕДАКТИРОВАТЬ: Но это не решит вашу проблему.

  1. Ваш скрипт не обнаруживает элемент <div id="counts">, так как он еще не загружен, это можно исправить, переместив скрипт после div

  2. Так как innerHTML возвращает строку, выполнение + присоединит обе строки, и ваши секунды будут выглядеть как 011111111 Так что вам придется анализировать ее в строку с помощью parseInt(window.seconds.innerHTML)

Так меняется window.seconds = window.seconds + 1 в window.seconds.innerHTML = parseInt(window.seconds.innerHTML) + 1;

и перемещение тега скрипта в самом низу, должно в фокусе

...