Почему мой контент Javascript не виден на веб-странице

Я новичок в JavaScript. Я пытался сделать какую-нибудь викторину, используя HTML, CSS и JS. В викторине я хочу таймер на 1 минуту. Я написал отдельный код для таймера и шаблонов. Таймер работал нормально.

Но при слиянии обоих кодов таймера не видно. Хотя по истечении 1 минуты выдает сообщение "время вышло". Я использовал свойства позиционирования и пробовал разные позиции, но все равно это не видно.

<html>
  <head>
    <style>
      .score
      {
        position:absolute;
        left:900;
      }
      #whole
      {
        background-color:black;
        color:white;
        width:80%;
        height:70%;
        position:relative;
        top:45;
        left:95;
        border:4px solid black;
      }
      .optns
      {
        width:40%;
        height:5%
      }
      #question
      {
        color:black;
        background-color:#f2f2f2;
        width:99%;
        height:20%;
        position:absolute;
        top:35;
        left:5;
      }
      .optn1
      {
        position:absolute;
        top:190;
        left:120;
      }
      .optn2
      {
        position:absolute;
        top:230;
        left:120;
      }
      .optn3
      {
        position:absolute;
        top:270;
        left:120;
      }
      .optn4
        {
        position:absolute;
        top:310;
        left:120;
      }
      .prev
      {
        position:absolute;
        down:80px;
        left:200px;
      }
      .next
      {
        position:absolute;
        down:80px;
        right:200px;
      }
      #timer
      {
        position:absolute;
        top:1000px;
        background-color:pink;
        color:blue;
        font-family:cursive;
        z-index:9999;
      }
    </style>
  </head>
  <body>
    <div id=whole>
      <center>TIMER HERE</center>
      <script>
        var fixed=new Date();
        var fixedsecond=fixed.getSeconds();
        var fixedmin=fixed.getMinutes();
        function changetime()
        {
          var current=new Date();
          var currentsecond=current.getSeconds();
          var currentmin=current.getMinutes();
          var m=currentmin-fixedmin;
          var s=(currentsecond-fixedsecond);
          if(s<0)
          {
            s=s+60
            m=m-1;
          }
          if(m>=1)
          {
            clearInterval(t);
            prompt("TIME IS UP");
          }
          document.getElementById("timer").innerHTML="<center id=timer><h1>"+m+":"+s

          +"</center></h1>";
        }
        var t=setInterval(changetime,1000);
      </script>
      <span class="score">SCORE</span>
      <div id=question>
        Question here
      </div>
    </div>
    <button class="optn1 optns">OPTION 1</button>
    <button class="optn2 optns">OPTION 2</button>
    <button class="optn3 optns">OPTION 3 </button>
    <button class="optn4 optns">OPTION 4</button>
    <button class=prev>PREVIOUS</button>
    <button class="next">NEXT</button>
  </body>
</html>

Заранее спасибо!

Источник

4 ответа

Ты звонишь document.getElementById("timer") но этот элемент еще не существует в HTML. Вы должны иметь этот элемент в своем HTML или создать его в документе с помощью JavaScript.

Попробуйте что-то вроде этого:

<div id="timer">TIMER HERE</center>

И JS:

document.getElementById("timer").innerHTML = m + ":" + s;

Кроме того - вы не должны использовать <center> как это устарело.

Источник

Вы используете "весь" в качестве идентификатора в HTML, но вызываете идентификатор "таймера" в JavaScript.

Обновите идентификатор в скрипте, как показано ниже:

document.getElementById("timer").innerHTML

с

document.getElementById("whole").innerHTML
Источник

1) изменить

<center id="timer">TIMER HERE</center>

с этим:

<div id="timer">TIMER HERE</div>

2) также вам нужно изменить это:

document.getElementById("timer").innerHTML = "<center id=timer><h1>" + m + ":" + s

с этим:

document.getElementById("timer").innerHTML=m+":"+s;

3) ваш CSS прослушивается, измените:

#timer {
  position: absolute;
  top: 1000px;
  background-color: pink;
  color: blue;
  font-family: cursive;
  z-index: 9999;
}

с этим:

#timer
{
text-align: center;
background-color:pink;
color:fff;
font-family:cursive;
}

Теперь вы можете увидеть свой таймер...

Источник

Вы должны увидеть ошибку javascript непосредственно из консоли Web Developer, используя любые браузеры (Safari, Chrome и т. Д.). Этот код не работает в этой строке

document.getElementById("timer").innerHTML

Там нет элемента с идентификатором "таймер".

Источник
Другие вопросы по тегам