與日期一起工作時奇怪的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>