首頁猿問在 HTML 中使用...

在 HTML 中使用 JavaScript 單擊時如何切換按鈕文本

JavaScript

蕪湖不蕪 2023-06-09 14:49:55

我正在學習 JavaScript 的基礎知識，似乎遇到了困難，只是找不到解決單擊時如何更改按鈕文本的答案。因此，我的 JavaScript 代碼運行到單擊 html 中的按鈕時的位置，然后網站的背景顏色在白天和黑夜之間切換（就模式而言）。但是我試圖切換按鈕中的文本以在單擊時更改。因此，當背景顏色處于白天模式時，按鈕會顯示“夜間模式”，然后單擊后，我希望按鈕文本切換到“白天模式”以轉換回原始狀態。對你的幫助表示感謝?。TML:<!DOCTYPE html><html dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>Button Shifter</title> </head> <body> <h1>COLOR SHIFTER: Day/Night Mode</h1> <p>Click the button to see some magic! Toggle between Day and Night mode! Give it a try!</p> <br><br><br><br> <button onclick="toggleTheme()" id="myButton" >Dark Mode</button> <script src="Javascript.js"></script> </body></html>腳本：function toggleTheme() { document.body.classList.toggle('dark-mode'); element.classList.toggle("dark-mode"); var btn = document.getElementById("myButton"); if (btn.value == "Night Mode"){ btn.value = "Day Mode"; }else { btn.value = "Night Mode";}

查看完整描述

4 回答

元芳怎么了

TA貢獻1798條經驗獲得超7個贊

實際上你的代碼中有一些錯別字和錯誤，這不僅僅是關于 innerHTML。檢查片段。

document.getElementById("myButton").addEventListener("click", function (e) {

document.body.classList.toggle('dark-mode');

// element.classList.toggle("dark-mode");

if (e.target.textContent === "Dark Mode") {

e.target.textContent = "Day Mode";

} else {

e.target.textContent = "Dark Mode";

}

});

<body>

<h1>COLOR SHIFTER: Day/Night Mode</h1>

<p>Click the button to see some magic! Toggle between Day and Night mode! Give it a try!</p>

</body>

反對回復 2023-06-09

冉冉說

TA貢獻1877條經驗獲得超1個贊

使用 innerHTML 設置/獲取按鈕文本。另外，如果你想輕松調試你的JS，你可以使用瀏覽器調試工具（F12->控制臺）。

<!DOCTYPE html>

<head>

<title>Button Shifter</title>

<style>

.dark-mode {

background-color: black;

}

.whiteText {

color: white;

}

</style>

</head>

<body>

<h1 class="paraText1">COLOR SHIFTER: Day/Night Mode</h1>

Click the button to see some magic! Toggle between Day and Night mode!

Give it a try!

</p>

</div>

</body>

function toggleTheme() {

document.body.classList.toggle("dark-mode");

document.getElementById("heading").classList.toggle("whiteText");

var btn = document.getElementById("myButton");

if (btn.innerHTML == "Night Mode") {

btn.innerHTML = "Day Mode";

} else {

btn.innerHTML = "Night Mode";

}

</script>

</html>

反對回復 2023-06-09

一只斗牛犬

TA貢獻1784條經驗獲得超2個贊

const nightText = "Night Mode";

const dayText = "Day Mode";

function toggleTheme(button) {

document.querySelector("body").classList.toggle('dark-mode'); // have a look at querySelector :)

button.classList.toggle("dark-mode");

if (button.textContent == nightText){

button.textContent = dayText;

}else {

button.textContent = nightText;

}

.dark-mode {

background-color: #333333;

color: #dddddd;

}

<body>

<h1>

COLOR SHIFTER: Day/Night Mode

</h1>

<p>

Click the button to see some magic! Toggle between Day and Night mode! Give it a try!

</p>

Night Mode

</button>

</body>

反對回復 2023-06-09

阿波羅的戰車

TA貢獻1862條經驗獲得超6個贊

function toggleTheme() {

document.body.classList.toggle('dark-mode');

var btn = document.getElementById("myButton");

if (btn.textContent === "Dark Mode") return btn.textContent = "Day Mode";

btn.textContent = "Dark Mode"

}

反對回復 2023-06-09

4 回答
0 關注
277 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 HTML 中使用 JavaScript 單擊時如何切換按鈕文本

在 HTML 中使用 JavaScript 單擊時如何切換按鈕文本

4 回答

添加回答