时间戳

首页 > 解决方案 > daysEl 为空 Javascript

javascript - daysEl 为空 Javascript

问题描述

昨天我用 JS 做了倒数计时器，但是有 2 个问题，控制台在第 18 行和第 30 行查看“daysEl is null”，以及在第一行“重新声明 const daysEl”。老实说，我不知道我做错了什么。这是代码：

const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("mins");
const secondsEl = document.getElementById("seconds");

const webStart = "1 Oct 2021";

function countdown() {
    const webStartDate = new Date(webStart);
    const currentDate = new Date();
    const totalSeconds = (webStartDate - currentDate) / 1000;

    const days = Math.floor(totalSeconds / 3600);
    const hours = Math.floor(totalSeconds / 3600) % 24;
    const mins = Math.floor(totalSeconds / 60) % 60;
    const seconds = Math.floor(totalSeconds) % 60;

    daysEl.innerHTML = days;
    hoursEl.innerHTML = formatTime(hours);
    minsEl.innerHTML = formatTime(mins);
    secondsEl.innerHTML = formatTime(seconds);
}

function formatTime(time) {
    return time < 10 ? '0${time}' : time;
}

// initial call

countdown();
setInterval(countdown, 1000);

这是网站的结构。这不完全是我的代码，我仍在重构它以使其看起来和工作良好：

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comtatible" concent="IE=edge, chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Strona poświęcona mojoj działalnośći w    świecie fotografii. Od kilku lat moją pasją i życiem codziennym jest fotografia i na tej stronie chciał bym się nią podzielić z większym gronem odbiorców"/> 
<meta name="keywords" content="pasja, fotografia, zdjęcia, portret, obiektyw, aparat"/>


<title>Patryk Śpiewak Fotografia</title>

<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="style/toggle.css" type="text/css">
<link rel="stylesheet" href="style/animate.css" type="text/css">
<link rel="stylesheet" href="style/studio.css" type="text/css">
<link rel="Shortcut icon" href="img/iko.png" />
<link href="https://fonts.googleapis.com/css?family=Gafata|Italianno|Roboto" rel="stylesheet">
<link rel="stylesheet" href="css/fontello.css" type="text/css">
<meta name="author" content="Dawid Girtler">
<link href="jquery.tabSlideOut.css" rel="stylesheet">
</head>
<body oncontextmenu="return false" onload="zmienslajd()">
<main>

<header>

<div class="hide">

<div id="toggle">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

<div id="menu">



<nav class="mobile">

    <li>Portfolio

    <ul>
        <li><a href="prywatne.html">Sesje prywatne</a></li>
        <li><a href="imprezy.html">Imprezy okolicznościowe</a></li>
        <li><a href="koscielne.html">Uroczystości kościelne</a></li>
    </ul>


    </li>
    <li><a href="uslugi.html" class="tilelink">Usługi</a></li>
    <li><a href="studio.html" class="tilelink">Studio</a></li>
    <li><a href="kontakt.html" class="tilelink">Kontakt</a></li>
    <li><a href="omnie.html" class="tilelink">O mnie</a></li>
    
</nav>


    <div class="center">
        <a href="https://www.facebook.com/PatrykSpiewakFotografia/" target="_blank" class="tilelink">
        <div class="mediaiko"><i class="icon-facebook"></i></div></a>

        <a href="https://www.youtube.com/channel/UChbk9ccRM0TDEV_MhoKqhUQ/featured" target="_blank" class="tilelink">
        <div class="mediaiko"><i class="icon-youtube"></i></div></a>

        <a href="https://www.instagram.com/patrykspiewakfotografia/" target="_blank" class="tilelink">
        <div class="mediaiko"><i class="icon-instagram"></i></div></a>

        <a href="https://www.messenger.com/t/PatrykSpiewakFotografia?fbclid=IwAR13JuU_-8_Xmq22w2usPNNXGmnRf03cp7GmcEN0FvoOh2IZJ8hO4_actGI" target="_blank" class="tilelink">
        <div class="mediaiko"><i class="icon-comment-empty"></i></div></a>

        <a href="pobierz.php" class="tilelink">
        <div class="mediaiko"><i class="icon-download" style="color: black"></i></div>
        </a>
    </div>
    
</div>
</div>

<nav>
<div class="logo"><a href="home.html"><img src="img/home.png" /></a></div>

<div id="menuc">
<ul id="menutest">
    <li onclick ="myFunction()">Portfolio</li>
    <li><a href="uslugi.html">Usługi</a></li>
    <li><a href="studio.html">Studio</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="omnie.html">O mnie</a></li>
</ul>

<ul id="menup" class="animated zoomin">
    <li><a href="prywatne.html">Sesje prywatne</a></li>
    <li><a href="imprezy.html">Imprezy okolicznościowe</a></li>
    <li><a href="koscielne.html">Uroczystości kościelne</a></li>
</ul>
</div>

    <div class="social">


      <div class="iko">
        <a href="https://www.facebook.com/PatrykSpiewakFotografia/" target="_blank" class="tilelink">
        <i class="icon-facebook"></i>
        </a>
        <a href="https://www.instagram.com/patrykspiewakfotografia/" target="_blank" class="tilelink">
        <i class="icon-instagram"></i>
        </a>
        <a href="https://www.youtube.com/channel/UChbk9ccRM0TDEV_MhoKqhUQ/featured" target="_blank" class="tilelink">
        <i class="icon-youtube"></i>
        </a>
        <a href="https://www.messenger.com/t/PatrykSpiewakFotografia" target="_blank" class="tilelink">
        <i class="icon-comment-empty"></i>
        </a>
        <a href="pobierz.php" class="tilelink">
        <i class="icon-download" style="color: black"></i>
        </a>
      </div>
    </div>
    <!--Temporary-->
<div class="text">
    <span>Już niedługo... &#128522;</span>
</div>

<div class="countdown-container">
    <div class="countdown-el days-c">
        <p class="big-text" id="hours">0</p>
        <span>Dni</span>
    </div>
    <div class="countdown-el hours-c">
        <p class="big-text" id="hours">0</p>
        <span>Godzin</span>
    </div>
    <div class="countdown-el minutes-c">
        <p class="big-text" id="hours">0</p>
        <span>Minut</span>
    </div>
    <div class="countdown-el seconds-c">
        <p class="big-text" id="hours">0</p>
        <span>Sekund</span>
    </div>
</div>
    <!--Temporary-->
</nav>
</header>
</main>

<script src="jquery-3.2.1.min.js"></script>
<script>
function myFunction(x) {
    x.classList.toggle("change");
}
</script>




<script src="jquery-3.2.1.min.js"></script>

<script>
$("#toggle").click(function() {
  $(this).toggleClass("on");
  $("#menu").slideToggle();
});
</script>

<script>
function myFunction() {
  document.getElementById("menup").style.display = "block";

}
</script>

<script>
$(document).ready(function () {
    $("li").click(function (evt) {
        if(evt.target.tagName != 'LI')
            return;
        $("ul", this).toggle();
    });
});
</script>
<script type="text/javascript" src="script.js" defer></script>
</body>
</html>

标签： javascripthtml

解决方案

@Adam Saar 的建议是将标签移动到页面底部或添加 defer 属性。我刚刚创建了两个文件：

HTML：

<!DOCTYPE html>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<html>
<head>
<title>Countdown clock</title>

<script type="text/javascript" src="script.js" defer>


</script>

<style type="text/css">



</style>
</head>
<body>

<span id="days"></span> days <span id="hours"></span> hours <span id="mins"></span> minutes and <span id="seconds"></span> seconds

</body>
</html>

“script.js”是：

const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("mins");
const secondsEl = document.getElementById("seconds");

const webStart = "1 Oct 2021";

function countdown() {
    const webStartDate = new Date(webStart);
    var currentDate = new Date();
    const totalSeconds = (webStartDate - currentDate) / 1000;

    const days = Math.floor(totalSeconds / (3600 * 24)); // updated to gets days
    const hours = Math.floor(totalSeconds / 3600) % 24;
    const mins = Math.floor(totalSeconds / 60) % 60;
    const seconds = Math.floor(totalSeconds) % 60;

    daysEl.innerHTML = days;
    hoursEl.innerHTML = formatTime(hours);
    minsEl.innerHTML = formatTime(mins);
    secondsEl.innerHTML = formatTime(seconds);
}

function formatTime(time) {
    return time < 10 ? `0${time}` : time;  // updated to use backticks instead of quotes
}

// initial call

countdown();
setInterval(countdown, 1000);

而且，这正如我所料。我已经更新了脚本的两行 - 为您的“days”元素获取天数而不是小时数，并使用反引号而不是formatTime().

因此，这是导致问题的脚本的位置 - 如果您将其保留在head标签中并defer像我一样使用该属性，它就可以正常工作。

推荐阅读