与日期一起工作时奇怪的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变量它搞糟的日期，如果我插入等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在评论中提出了以下问题：

dataset.auctionExpire有什么区别？为什么是小写字母？

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

HTML中的自定义数据属性的名称以data-开头。它只能包含字母，数字和下列字符：破折号（ - ），点（。），冒号（:)，下划线（_） - 但不包含任何ASCII大写字母（A到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>