日付で作業するときの奇妙なJavascriptの動作

Question

基本的に私は値が7,14,30でクリックしたときにデータ属性の値を取ろうとしますが、JavaScriptの日付コードに挿入しようとしましたが、値を入れれば正しい日付に警告しますが、データ属性の1つを保持する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変数のIT混乱を使用して、変数iのすべての作品せずに手動など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）は含まれません。

<span data-auctionExpire="7" 

をしかし、内部で、それはauctionexpireとして保存されます：あなたはここで行ったよう

しかし、あなたのHTMLに、あなたは、大文字とあなたのdata-属性を定義することができます。後に続く類似した名前付き属性はそれぞれ追加されません。以下に、複数のデータ属性を追加した小さな例を示します。唯一の違いは、いくつかの文字が大文字になっていることである：あなたの問題を解決するために

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>

は、私は2番目の行を交換しました。しかしそれが唯一の問題ではありません。 .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>