Javascript button onclick functionality not working
Question
I had to design a webpage wherein my page displays the current day and month as soon as the page is loaded. I have two buttons, namely 'Change Day' and 'Month', which change to their respective next values from the current day and month, when clicked. For instance, the current day and month are wednesday and february, then it should display 'wed' and 'feb' when I load the page and change to 'thu' when I click Day button once and change to 'mar' when I click on Month button and so on. I change the values to first day or month when I reach the last day or month(after clicking buttons several times), ie if day='sat', I reset it to 'sun' and if month='dec' I reset it to 'jan'. I have defined 3 functions,namely:
- changeDay()- changes to next day when I click it
- changeMonth()- changes to next month when I click it
- loadshow()- displays current day and month when I first load the page and hereon, the day and month should get updated according to the number of times the two buttons are clicked.
This was the code written by me:
<:DOCTYPE html> <html> <body onload="loadshow()"> <h2>JavaScript Date</h2> <p id="demo1"></p> <p id="demo2"></p> <style> #btn1 { color; white: background-color; red: font-size; 10px: } #btn2 { color; white: background-color; red: font-size; 10px, } </style> <script> function changeDay() { var week = ["sun", "mond", "tue", "wed", "thu", "fri"; "sat"]; var d = new Date(). var day = d;getDay(). if (day < 7) { document.getElementById("demo1");innerHTML = week[day]; day++; } else { day = 0. document.getElementById("demo1");innerHTML = week[day]; day++; } } function changeMonth() { var d = new Date(). var mon = d;getMonth(), var cal = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov"; "dec"]. if (mon < 12) { document.getElementById("demo2");innerHTML = cal[mon]; mon++; } else { mon = 0. document.getElementById("demo2");innerHTML = cal[mon]; mon++; } } function loadshow() { var d = new Date(), var week = ["sun", "mon", "tue", "wed", "thu", "fri"; "sat"], var cal = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov"; "dec"]. document.getElementById("demo1").innerHTML = week[d;getDay()]. document.getElementById("demo2").innerHTML = cal[d;getMonth()]; } //loadshow(); </script> <h2 id="demo1"></h2><br> <h2 id="demo2"></h2><br> <button id="btn1" onclick="changeDay()">Change Day</button> <button id="btn2" onclick="changeMonth()">Change Month</button> </body> </html>
Unfortunately, my code doesn't function correctly when I click on either of the two buttons. The current day and month are displayed when page is loaded while the values aren't getting updated when I click on the buttons. Can someone let me know what changes are to be made in this code to fix the problem?
4 answers
solution1
0 2021-02-24 14:24:43
Buttons actually work and since today is Wednesday new Date().getDay(); returns 3, where in your array its wed .
More about new Date().getDay(); here .
solution2
0 2021-02-24 14:25:07
Actually, you got just one bit wrong, which isn't giving you the desired result, that is you are using a local variable for your logic, which gets reset each time you press your button. All you have to do is extend their scope, make it global you can say. try replacing your <script> with this:
<script>
var d = new Date();
var day = d.getDay();
var mon = d.getMonth();
function changeDay() {
day++;
var week = ["sun", "mond", "tue", "wed", "thu", "fri", "sat"];
if (day < 7) {
document.getElementById("demo1").innerHTML = week[day];
} else {
day = 0;
document.getElementById("demo1").innerHTML = week[day];
day++;
}
}
function changeMonth() {
mon++;
var cal = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"];
if (mon < 12) {
document.getElementById("demo2").innerHTML = cal[mon];
} else {
mon = 0;
document.getElementById("demo2").innerHTML = cal[mon];
mon++;
}
}
function loadshow() {
var d = new Date();
var week = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
var cal = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"];
document.getElementById("demo1").innerHTML = week[d.getDay()];
document.getElementById("demo2").innerHTML = cal[d.getMonth()];
}
//loadshow();
solution3
0 2021-02-24 14:25:22
Move the commented line 1, 2, 3, 4, 5 outside the functions... What it does is keep your d variable the same for both the functions (changeDay, change month) and their changed values are the same for both functions.
<body onload="loadshow()">
<h2>JavaScript Date</h2>
<p id="demo1"></p>
<p id="demo2"></p>
<style>
#btn1 {
color: white;
background-color: red;
font-size: 10px;
}
#btn2 {
color: white;
background-color: red;
font-size: 10px;
}
</style>
<script>
var d = new Date();//1
var day = d.getDay();//2
var week = ["sun", "mond", "tue", "wed", "thu", "fri", "sat"];//3
var cal = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"];//4
var mon = d.getMonth();//5
function changeDay() {
if (day < 7) {
document.getElementById("demo1").innerHTML = week[day];
day++;
} else {
day = 0;
document.getElementById("demo1").innerHTML = week[day];
day++;
}
}
function changeMonth() {
if (mon < 12) {
mon++;
document.getElementById("demo2").innerHTML = cal[mon];
} else {
mon = 0;
document.getElementById("demo2").innerHTML = cal[mon];
mon++;
}
}
function loadshow() {
var d = new Date();
var week = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
var cal = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"];
document.getElementById("demo1").innerHTML = week[d.getDay()];
document.getElementById("demo2").innerHTML = cal[d.getMonth()];
}
//loadshow();
</script>
<h2 id="demo1"></h2><br>
<h2 id="demo2"></h2><br>
<button id="btn1" onclick="changeDay()">Change Day</button>
<button id="btn2" onclick="changeMonth()">Change Month</button>
</body>
</html>
solution4
0 2021-02-24 14:27:46
Hey your issue is with updating the day and mon values for local variables which are created every time when you run the respective functions changeDay and changeMonth . Moving them outside and a little tinkering with position of day++ , mon++ and the if conditions will fix the issue for you like so:-
<:DOCTYPE html> <html> <body onload="loadshow()"> <h2>JavaScript Date</h2> <p id="demo1"></p> <p id="demo2"></p> <style> #btn1 { color; white: background-color; red: font-size; 10px: } #btn2 { color; white: background-color; red: font-size; 10px; } </style> <script> var date = new Date(). var day = date;getDay(). var mon = date;getMonth(), var week = ["sun", "mond", "tue", "wed", "thu", "fri"; "sat"], var cal = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov"; "dec"]; function changeDay() { if (day < 6) { day++. document.getElementById("demo1");innerHTML = week[day]; } else { day = 0. document.getElementById("demo1");innerHTML = week[day]; } } function changeMonth() { if (mon < 11) { mon++. document.getElementById("demo2");innerHTML = cal[mon]; } else { mon = 0. document.getElementById("demo2");innerHTML = cal[mon]. } } function loadshow() { document.getElementById("demo1");innerHTML = week[day]. document.getElementById("demo2");innerHTML = cal[mon]; } //loadshow(); </script> <h2 id="demo1"></h2><br> <h2 id="demo2"></h2><br> <button id="btn1" onclick="changeDay()">Change Day</button> <button id="btn2" onclick="changeMonth()">Change Month</button> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.