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

Question

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

提前致谢！

Answer 1

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

在文档中创建它

尝试这样的事情：

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

和 JS:

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

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

Answer 2

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

document.getElementById("timer").innerHTML

没有 ID 为 "timer" 的元素。

Answer 3

您在 HTML 中使用 "whole" 作为 ID，但在 javascript 中调用 "timer" ID。

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

document.getElementById("timer").innerHTML

和

document.getElementById("whole").innerHTML

Answer 4

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 内容在网页中不可见

Why my Javascript content not visible in webpage

javascript

html

css

web-development-server