Javascript 按鈕 onclick 功能不起作用
[英]Javascript button onclick functionality not working
問題描述
我必須設計一個網頁，其中我的頁面在頁面加載后立即顯示當前日期和月份。 我有兩個按鈕，即“更改日期”和“月份”，當單擊它們時，它們會從當前日期和月份更改為各自的下一個值。 例如，當前日期和月份是星期三和二月，那么當我加載頁面時它應該顯示'wed'和'feb'，當我單擊Day按鈕時它會變為'thu'，當我單擊時它會變為'mar'月按鈕等。 當我到達最后一天或一個月時，我將值更改為第一天或一個月（在多次單擊按鈕后），即如果 day='sat'，我將其重置為'sun'，如果 month='dec' 我將其重置到'jan'。 我定義了3個函數，即：
- changeDay()- 當我點擊它時更改為第二天
- changeMonth()- 單擊它時更改為下個月
- loadshow() - 當我第一次加載頁面時顯示當前日期和月份，日期和月份應該根據點擊兩個按鈕的次數來更新。
這是我寫的代碼：
<: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>
不幸的是，當我單擊兩個按鈕中的任何一個時，我的代碼都沒有正確地 function 。 加載頁面時會顯示當前日期和月份，而單擊按鈕時值沒有更新。 有人可以讓我知道要在此代碼中進行哪些更改以解決問題嗎？
4 個解決方案
解決方案1
0 2021-02-24 14:24:43
按鈕實際上可以工作，因為今天是星期三new Date().getDay(); 返回 3，在你的數組中它的wed 。
更多關於new Date().getDay(); 在這里。
解決方案2
0 2021-02-24 14:25:07
實際上，您只是弄錯了一點，這並沒有給您想要的結果，那就是您為邏輯使用了局部變量，每次按下按鈕時都會重置。 您所要做的就是擴展他們的 scope，使其全球化。 嘗試用這個替換你的<script> ：
<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();
解決方案3
0 2021-02-24 14:25:22
將注釋的第 1、2、3、4、5 行移到函數之外......它的作用是使兩個函數（changeDay、change month）的 d 變量保持相同，並且它們的更改值對於兩個函數都是相同的。
<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>
解決方案4
0 2021-02-24 14:27:46
嘿，您的問題是更新本地變量的day和mon值，這些變量在您每次運行相應的函數changeDay和changeMonth時創建。 將它們移到外面並稍微修補一下day++的 position ， mon++和if conditions將為您解決問題，如下所示：-
<: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>
在Javascript中將onclick功能從元素轉移到按鈕
[英]Transfer onclick functionality from element to button in Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.