javascript - 使用日期时奇怪的 Javascript 行为

Question

基本上，我尝试在单击时获取数据属性的值，值是 7,14,30，我尝试将它们插入到一些 javascript 日期代码中，但它没有显示正确的日期？如果我自己输入值，它会提醒正确的日期，但是当我使用包含其中一个数据属性的 JavaScript 变量时，我会得到远离真实日期的日期？

示例网站 here

HTML

<form class="annonceForm" action="index.php?page=opretAuction" method="POST">
    <input type="text" name="" placeholder="Produkt">

    <div id="auctionExpireWrapper" class="auctionExpireWrapper">
        <span data-auctionExpire="7" class="auctionExpire">7 dage</span>
        <span data-auctionExpire="14" class="auctionExpire">14 dage</span>
        <span data-auctionExpire="30" class="auctionExpire">30 dage</span>
    </div>
    <input id="auctionStartDateInput" type="hidden">
    <input id="auctionEndDateInput" type="hidden">

    <textarea placeholder="Beskrivelse"></textarea>
           <!-- HIDDEN INPUT FELTER -->
           <input type="hidden" name="CSRFToken" value="<?php echo $_SESSION['CSRFToken']; ?>">
    <input type="hidden" name="OpretAuctionAuctioneer" value="<?php echo $_SESSION['username']; ?>"> 
</form>

Javascript

document.getElementById("auctionExpireWrapper").addEventListener("click", function (e) {
var expireDate = e.target.getAttribute("data-auctionExpire");
alert(expireDate);
var today = new Date();

当我使用expireDate变量时，它会弄乱日期，如果我在没有该变量的情况下手动插入etc 14，一切正常吗？

today.setDate(today.getDate() + expireDate);
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();

if (dd < 10) {
    dd = '0' + dd
}
if (mm < 10) {
    mm = '0' + mm
}

today = yyyy + '-' + mm + '-' + dd;
alert(today);
});

谁能向我解释一下为什么它会这样？

Answer 1

发布答案而不是进一步评论。 OP 在评论中提出了以下问题:

What is the difference between dataset.auctionExpire? and why is the e lower case?

因为它是这样定义的。如果您检查HTMLElement.dataset文档，你会发现

The name of a custom data attribute in HTML begins with data-. It must contain only letters, numbers and the following characters: dash (-), dot (.), colon (:), underscore (_) -- but NOT any ASCII capital letters (A to Z).

但是，在 HTML 中，您可以使用大写字母定义 data- 属性，就像您在此处所做的那样:

<span data-auctionExpire="7"

但在内部，它将存储为auctionexpire。后面的每个类似的命名属性都不会被添加。下面是一个小示例，我添加了多个数据属性。唯一的区别是有些字符是大写的:

document.getElementById('forTest').addEventListener('click', function() {
   console.log('this.dataset.auctionexp: ' +  this.dataset.auctionexp);
   console.log('this.dataset.auctionExp: ' +  this.dataset.auctionExp);
   console.log('this.dataset.auCTionexp: ' +  this.dataset.auCTionexp);
   console.log('this.dataset.AUCTIONEXP: ' +  this.dataset.AUCTIONEXP);
});

<span id="forTest" data-auctionExp="one uppercase" data-auCTionexp="CT as upper" data-AUCTIONEXP="FULL UPPER">clickme</span>

为了解决您的问题，我替换了第二行。但这并不是唯一的问题。您从 .dataset.auctionexpire 检索的值的类型为 string 类型。当你做的时候

today.setDate(today.getDate() + expireDate)

您正在将一个整数与一个字符串值相加

  today.getDate() // = 13, type Number (time of this post)
  expireDate      // =  7, type String(clicked on "7 tage")
+ ----------------------
  // result: 137

因此，您将新的日期部分设置为 137 天，而不是 20 天 (13+7)。要修复此问题，只需使用 new Number() 将字符串转换为数字，就像我在下面所做的那样。

document.getElementById("auctionExpireWrapper").addEventListener("click", function(e) {
  var expireDate = e.target.dataset.auctionexpire;
  // expireDate is a string, not number. You have to cast it
  expireDate = new Number(expireDate);
  // should be correct now.
  
  console.log('expireDate: ' + expireDate);
  
  var today = new Date();
  today.setDate(today.getDate() + expireDate);
  
  var dd = today.getDate();
  var mm = today.getMonth() + 1; //January is 0!
  var yyyy = today.getFullYear();

  if (dd < 10) {
    dd = '0' + dd
  }
  if (mm < 10) {
    mm = '0' + mm
  }

  today = yyyy + '-' + mm + '-' + dd;
  console.log('today: ' + today);
});

<form class="annonceForm" action="index.php?page=opretAuction" method="POST">
  <input type="text" name="" placeholder="Produkt">

  <div id="auctionExpireWrapper" class="auctionExpireWrapper">
    <span data-auctionExpire="7" class="auctionExpire">7 dage</span>
    <span data-auctionExpire="14" class="auctionExpire">14 dage</span>
    <span data-auctionExpire="30" class="auctionExpire">30 dage</span>
  </div>
  <input id="auctionStartDateInput" type="hidden">
  <input id="auctionEndDateInput" type="hidden">

  <textarea placeholder="Beskrivelse"></textarea>
  <!-- HIDDEN INPUT FELTER -->
  <input type="hidden" name="CSRFToken" value="<?php echo $_SESSION['CSRFToken']; ?>">
  <input type="hidden" name="OpretAuctionAuctioneer" value="<?php echo $_SESSION['username']; ?>">
</form>