Javascript 打开日历的功能

我对html非常陌生，尤其是javascript，所以在这方面我还不是很好

我一直在尝试为我的朋友制作一个html页面，显示一个交互式的降临节日历。我希望页面只显示某一天的方框（因此在12日只显示第12个方框）和之前的方框

首先，我希望找到一个解决方案，但因为我已经失败了几个小时，我只是可以打开这些现在

我现在的问题是，当向下滚动到第二个框时，它会将我带到页面的开头（Firefox），并且我能够打开应该锁定的框。所以我希望有人能帮我做这件事，因为这是我送给朋友的圣诞礼物，我的朋友从一开始就试图教我html

我的卡片在html中是这样的

标题

文本
标题

文本

我找到正确盒子的脚本如下所示

function checkdate(selectday) {
    var dateselect = new Date (2020, 10, selectday);
    var card = document.querySelector('.card');
    var datenow = new Date();
    if (datenow > dateselect) {
        $('.scene').select(function() {
        $(".card", this).toggleClass("is-flipped")});
    } else {
        alert ("No cheating!");
    }
}

对不起，如果我忘了什么或者做错了什么，这是我的第一篇帖子。如果是这样，请告诉我

编辑1

这是一把与日历有关的小提琴

---

您的主要问题来自：

当加载HTML/JS时，您正在告诉一张被点击翻转的卡片。 因此，无论您在checkDate函数中做了什么，任何卡都会翻转

var card = document.querySelector('.card');
$('.scene').on('click', function() {
   $(".card", this).toggleClass("is-flipped");
});

我建议去掉那部分代码

现在，您需要从checkDate函数中翻转卡片。 下面是一个最类似于您的代码当前结构的修复程序：

function checkdate(selectday, card) { // TAKE ANOTHER PARAMETER OF THE CARD CLICKED
    var dateselect = new Date (2020, 10, selectday);
   // var card = document.querySelector('.card'); THIS VARIABLE WAS NEVER USED SO I COMMENTED IT OUT AND STOLE THE NAME
    var datenow = new Date();
    if (datenow > dateselect) {
          //$('.scene').select(function() { // CAN JUST GET THE CARD FROM THE VARIABLE PASSED IN
                $(card).toggleClass("is-flipped"); // USING "card" INSTEAD OF YOUR GLOBAL SELECTOR
          //});
    } else {
        alert ("No cheating!");
    }
}

由于我们现在将卡片翻转作为参数，因此需要更改html：

            <div> // I RELOCATED THE ONCLICK FUNCTION TO THE CARD ELEMENT
                <div class="scene scene--card">
                     <div class="card"  onclick="checkdate(24, this)"> // HERE IS WHERE THE CLICK WILL BE DETECTED, AND PASSING "this" WILL PASS THE CARD HTML ELEMENT INTO THE JS FUNCTION
                         <div class="card__face card__face--front i24"></div>
                         <div class="card__face card__face--back"><span style="font-size: 1.5em; text-decoration: underline">Header</span><br><br>Text here</div>
                     </div>
                </div>
            </div>
  

//我将ONCLICK函数重新定位到CARD元素
//这里是检测点击的地方，传递“this”将把CARD-HTML元素传递到JS函数中
标题

此处为文本

您需要对所有卡片进行HTML更改

翻牌有很多方法，但我认为这个解决方案与你已经拥有的最为相似

---

再一次，我们不再告诉卡片在点击时翻转，而是告诉卡片在可接受的日期范围内翻转。

您可以发布您的代码的其余部分吗？@LukeGalea Done！现在你可以看到我的笨拙了，一切都很好，谢谢你！谢谢你的详细解释，就连我的一级大脑也能理解，我看到了我的错误。所以我所有的技术问题现在都解决了，理论上我已经解决了，但出于好奇——有没有可能应用一种系统来隐藏那些无法打开的卡？这会使第一次访问时页面看起来不那么满。如果你不想的话，没必要这么做，我很高兴我已经拥有了！每个人都必须从某个地方开始：）如果你想隐藏卡片，你可以查看

display:none（css）。棘手的部分是确定哪些卡应该被隐藏，但是如果卡的编号大于日期，您可能希望遍历所有卡并将css
display
属性设置为
none
。如果答案回答了你的问题，别忘了接受