JavaScript에서 Onclick오류 (Onclick Error in JavaScript)

달력을 만들고 있습니다.
I found an error while coding the calendar.

달력

왼쪽 버튼을 클릭했을 때 저번 달로 이동 되고(보여지는)
오른쪽 버튼을 클릭했을 때 다음 달로 이동 되는 함수를 만들었습니다.

If you click the left button, it moves to the last month (as shown).
If you click the right button, I create a function that moves to the next month.


<button id="PreMonth" type="button" value="click" onclick="onRightClickTest();">></button>

<button id="LastMonth" type="button" value="click" onclick="onLeftClickTest();"><</button>`;

function onLeftClickTest() {
    firstdayInst = new Date(yyyy, mm-1, 1); 
    getfirstday = firstdayInst.getDay(); 
    lastdayInst = new Date(yyyy,mm-1,0);
    lastday = lastdayInst.getDate();
    showMonth(mm-1);
    showDay();
    showDate();
}


function onRightClickTest() {

    firstdayInst = new Date(yyyy, mm+1, 1); 
    getfirstday = firstdayInst.getDay(); 
    lastdayInst = new Date(yyyy,mm+1,0);
    lastday = lastdayInst.getDate();
    showMonth(mm+1);
    showDay();
    showDate();
    
}

하지만 작동이 되지 않습니다ㅠㅠ
그래서 함수 밖으로 (아래와 같이) 코딩하면 작동됩니다ㅠ__ㅠ
왜일까요?

But it doesn’t work.ᅲᅲ
So, if I code out of the function (as shown below), it works.ᅲ__ᅲ
Why?

firstdayInst = new Date(yyyy, mm+1, 1); 
getfirstday = firstdayInst.getDay(); 
lastdayInst = new Date(yyyy,mm+1,0);
lastday = lastdayInst.getDate();
showMonth(mm+1);
showDay();
showDate();

혹시 몰라 전체코드를 첨부하겠습니다.
I will attach the full code just in case.

Hello @alsgpwns, welcome to the GitHub Support Community!

Since you’re incrementing and decrementing numbers, I would recommend using the -- and ++ operators. This way the changes made to mm will be stored temporarily in memory and allow you to move forward or backward.

Here is the updated code (see the IF statements at the top of each function):

function onLeftClickTest() {
    if (mm != 0) mm--; // decrement mm if NOT 0 (January)
    firstdayInst = new Date(yyyy, mm, 1); 
    getfirstday = firstdayInst.getDay(); 
    lastdayInst = new Date(yyyy,mm,0);
    lastday = lastdayInst.getDate();
    showMonth(mm);
    showDay();
    showDate();
    
    document.getElementById('CalendarBody').innerHTML=text+
     `
    <button id="PreMonth" type="button" value="click" onclick="onRightClickTest();">></button>
    <button id="LastMonth" type="button" value="click" onclick="onLeftClickTest();"><</button>`;
}

function onRightClickTest() {
    if (mm != 11) mm++; // increment mm if NOT 11 (December)
    firstdayInst = new Date(yyyy, mm, 1); 
    getfirstday = firstdayInst.getDay(); 
    lastdayInst = new Date(yyyy,mm,0);
    lastday = lastdayInst.getDate();
    showMonth(mm);
    showDay();
    showDate();
    
    document.getElementById('CalendarBody').innerHTML=text+
     `
    <button id="PreMonth" type="button" value="click" onclick="onRightClickTest();">></button>
    <button id="LastMonth" type="button" value="click" onclick="onLeftClickTest();"><</button>`;
}

If you want to reset the month when you get to the end, you can add an ELSE statement, like the one below.

else {
  mm = 11 || 0; // 11 for onRightClick OR 0 for onLeftClick
}

This’ll also let you increment or decrement other variables, such as the year.

1 Like

Hi :slight_smile:
Thank you so much for your comment. :grinning: :grinning: :grinning:
It works well without adding ‘if’.
The reason my code didn’t work is because I didn’t add a button?
(Code below)

document.getElementById('CalendarBody').innerHTML=text+
     `
    <button id="PreMonth" type="button" value="click" onclick="onRightClickTest();">></button>
    <button id="LastMonth" type="button" value="click" onclick="onLeftClickTest();"><</button>`;

You’re welcome.

Yes, initially, clicking the buttons did not update the HTML (at least with the provided code). Because of that, you couldn’t see any changes.

1 Like

Thank you.
With your help, I was able to make the results like the picture below.

1 Like