为什么我的 Javascript 内容在网页中不可见答案

【问题标题】：Why my Javascript content not visible in webpage为什么我的 Javascript 内容在网页中不可见
【发布时间】：2018-06-13 08:03:21
【问题描述】：

我是 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>

提前致谢！

【问题讨论】：

您引用了null（参见控制台输出）。请注意，<center> tag 已弃用。

标签： javascript html css web-development-server

【解决方案1】：

您调用了document.getElementById("timer")，但该元素在 HTML 中尚不存在。您需要在 HTML 中包含此元素或通过 JavaScript 在文档中创建它。

试试这样的：

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

还有 JS：

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

另外 - 您不应使用 <center>，因为它已被弃用。

【讨论】：

除此之外，您不需要再次在innerHtml 中包含外部元素。这就是为什么它被称为：document.getElementById('timer').innerHTML = '<h1>' + m + ':' + s + '</h1>';

【解决方案2】：

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;
}

现在你可以看到你的计时器了...

【讨论】：

【解决方案3】：

您应该使用任何浏览器（Safari、Chrome 等）直接从 Web 开发者控制台看到 javascript 错误。此代码在此行失败

document.getElementById("timer").innerHTML

没有id为“timer”的元素。

【讨论】：

【解决方案4】：

您在 HTML 中使用“whole”作为 id，但在 javascript 中调用“timer”id。

更新脚本中的id，如下所示：

document.getElementById("timer").innerHTML

与

document.getElementById("whole").innerHTML

【讨论】：