date onclickの変数を増分する方法は？

Question

これまでのところ、今週の最初と最後の日が表示されるようにしました。ユーザーがボタンをクリックすると、次週の最初と最後の日付が表示されるようにしたいと思います。私は増分を試みましたが、下のコードでわかるように、動作していないようです。この偉業を達成するための適切な方法を増やしています。そうであれば、私のコードを修正して動作させるべきでしょうか？

//DISPLAY CURRENT DATE 
 
var d = new Date(); 
 
var m1 = d.getUTCMonth() + 1; 
 
var first = d.getDate() - d.getDay(); 
 
var last = first + 6; 
 

 
var year = d.getUTCFullYear(); \t 
 
\t  
 
document.getElementById("currMonth1").innerHTML = m1; 
 
document.getElementById("currDay1").innerHTML = first; 
 
document.getElementById("currMonth2").innerHTML = m1; 
 
document.getElementById("currDay2").innerHTML = last; 
 

 
document.getElementById("currYear").innerHTML = year; 
 

 
//WEEK AFTER 
 
function nextWeek() { 
 
var d = new Date(); 
 

 
var first = d.getDate() - d.getDay(); 
 
var last = first + 6; 
 

 
var newFirst = ++x; 
 
var newLast = ++x; 
 
var x = 7; 
 

 
document.getElementById("currDay1").innerHTML = newFirst; 
 
document.getElementById("currDay2").innerHTML = newLast; 
 
}

.number{ 
 
\t display: inline-block; 
 
} 
 

 
h2 { 
 
\t display: block; 
 
}

<input type="button" onclick="nextWeek()" class="arrow" value="&rarr;"><br> 
 

 
<h1 class="number" id="currMonth1"></h1> 
 
\t \t \t <h1 class="number">/</h1> 
 
\t \t \t <h1 class="number" id="currDay1"> 
 
</h1> 
 
<h1 class="number">&rarr;</h1> 
 
\t \t \t <h1 class="number" id="currMonth2"> 
 
</h1> 
 
\t \t \t <h1 class="number">/</h1> 
 
\t \t \t <h1 class="number" id="currDay2"> 
 
<br> 
 
\t \t \t <h2 id="currYear"></h2>

EDIT：私は解決策を見つけることができました。 ++ xを使うのではなく、[ここに変数を挿入] + = xと[ここに変数を挿入] - = xを使いました。 がx外ここ

var x = 7; 
//WEEK AFTER 
function nextWeek() { 

var d = new Date(); 

var first = d.getDate() - d.getDay(); 
var last = first + 6; 


var newFirst = ++x; 
var newLast = ++x; 

document.getElementById("currDay1").innerHTML = newFirst; 
document.getElementById("currDay2").innerHTML = newLast; 
} 

機能nextWeekの定義応答:)

Answer 1

xがnextWeek機能で未定義ますを与えているすべての人々へのフィードバックのおかげで、私はそこだと思うデモhttps://jsbin.com/cobelol/edit?html,js,output

Answer 2

です少し発注の問題です。あなたはコード行を並べ替えるべきです

var newFirst = ++x; 
var newLast = ++x; 
var x = 7; 

のようにする必要があります。

var d = new Date(); 
var first = d.getDate() - d.getDay(); 
var last = first + 6; 
var x = 7; 
var newFirst = first+x; 
var newLast = last+x; 

document.getElementById("currDay1").innerHTML = newFirst; 
document.getElementById("currDay2").innerHTML = newLast; 

Answer 3

nextWeek機能の実行時に月が同じままないように、あなたのコードにいくつかの変更を加えました。

//DISPLAY CURRENT DATE 
 
var d = new Date(); 
 
var m1 = d.getUTCMonth() + 1; 
 
var first = d.getDate() - d.getDay(); 
 
var last = first + 6; 
 

 
var year = d.getUTCFullYear(); 
 

 
document.getElementById("currMonth1").innerHTML = m1; 
 
document.getElementById("currDay1").innerHTML = first; 
 
document.getElementById("currMonth2").innerHTML = m1; 
 
document.getElementById("currDay2").innerHTML = last; 
 

 
document.getElementById("currYear").innerHTML = year; 
 

 
//WEEK AFTER 
 
function nextWeek() { 
 
    var date = new Date(); 
 
    var numberOfDaysToAdd = 7; 
 
    
 
    // set date for next week first day and month 
 
    date.setDate(date.getDate() + numberOfDaysToAdd); 
 
    var nextWeekFirstDay = date.getDate(); 
 
    var nextWeekFirstDayMonth = date.getUTCMonth() + 1; 
 
    
 
    // set date for next week last day and month 
 
    date.setDate(date.getDate() + 6); 
 
    var nextWeekLastDay = date.getDate(); 
 
    var nextWeekLastDayMonth = date.getUTCMonth() + 1; 
 

 
    document.getElementById("currDay1").innerHTML = nextWeekFirstDay; 
 
    document.getElementById("currMonth1").innerHTML = nextWeekFirstDayMonth; 
 
    
 
    document.getElementById("currDay2").innerHTML = nextWeekLastDay; 
 
    document.getElementById("currMonth2").innerHTML = nextWeekLastDayMonth; 
 
}

.number { 
 
    display: inline-block; 
 
} 
 

 
h2 { 
 
    display: block; 
 
}

<input type="button" onclick="nextWeek()" class="arrow" value="&rarr;"><br> 
 

 
<h1 class="number" id="currMonth1"></h1> 
 
<h1 class="number">/</h1> 
 
<h1 class="number" id="currDay1"> 
 
</h1> 
 
<h1 class="number">&rarr;</h1> 
 
<h1 class="number" id="currMonth2"> 
 
</h1> 
 
<h1 class="number">/</h1> 
 
<h1 class="number" id="currDay2"> 
 
<br> 
 
\t \t \t <h2 id="currYear"></h2>