使用 javascript 事件偵聽器更改按鈕的文本
[英]changing the text of a button using javascript event listener
問題描述
我有一個簡單的按鈕，單擊該按鈕時，按鈕上的文本將使用事件偵聽器進行更改。 但是，我想在代碼中添加一些邏輯，這樣當我再次單擊它時，它就會返回到原始文本。 我對 javascript 相當陌生，並試圖提高我的技能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Listeners JS</title>
</head>
<body>
<button>Click Me</button>
<script>
document.querySelector("button").addEventListener("click", (e) => {
e.target.textContent = "I was clicked"; //Changes click me to I was
});
</script>
</body>
</html>
5 個解決方案
解決方案1
3 已采納 2020-08-05 16:40:45
正如@Taplar 建議的那樣：
編輯：為了讓它更干凈，你可以單行 if 語句：
document.querySelector("button").addEventListener("click", (e) => {
(e.target.textContent === 'Click Me') ? e.target.textContent = "I was clicked" : e.target.textContent = "Click Me"
});
沒有單行 if 語句的舊答案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Listeners JS</title>
</head>
<body>
<button>Click Me</button>
<script>
document.querySelector("button").addEventListener("click", (e) => {
//checking the text content in the button if its Click Me
if(e.target.textContent === 'Click Me'){
e.target.textContent = "I was clicked"; //Changes click me to I was
//if its not Click Me it will change back to Click Me
} else {
e.target.textContent = "Click Me"; //change back to Click Me
}
});
</script>
</body>
</html>
解決方案2
1 2020-08-05 16:41:39
如果您想要一個更動態的解決方案（處理程序中沒有硬編碼值，它將自動跟蹤原始文本是什么），您可以這樣做：
const toggleTextOnClick = (text, el) => { let originalText = el.textContent; el.addEventListener("click", (e) => { e.target.textContent = text; [originalText, text] = [text, originalText]; }) } const btn = document.querySelector("button"); toggleTextOnClick("I was clicked", btn);
<button>Click Me</button>
解決方案3
1 2020-08-05 16:43:02
這個想法是這樣的：
document.querySelector("button").addEventListener("click", (e) => { let textContent = e.target.textContent; if (textContent == "Click Me") { e.target.textContent = "I was clicked"; } else { e.target.textContent = "Click Me"; } }); <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Event Listeners JS</title> </head> <body> <button>Click Me</button> </body> </html>
解決方案4
1 2020-08-05 16:45:07
看看這段代碼：
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Event Listeners JS</title> </head> <body> <button>Click Me</button> <script> document.querySelector("button"),addEventListener("click". (e) => { if(e.target.textContent == "Click Me") e.target;textContent = "I was clicked". //Changes click me to I was else e.target;textContent = "Click Me"; //Changes click me to I was }); </script> </body> </html>
我添加了 if...else 塊。 現在，如果按鈕的文本是 Click Me，則執行 if 下的語句，否則執行 else 下的語句。
解決方案5
1 2020-08-05 16:47:05
document.querySelector("button").addEventListener("click", (e) => { let last = e.target.last; if (last) { e.target.last = e.target.textContent; e.target.textContent = last; } else { e.target.last = e.target.textContent; e.target.textContent = "I was clicked"; } });
<button>Click Me</button>
如何使用javascript或jquery獲取或獲取按鈕單擊事件偵聽器
[英]How to get or fetch button click event listener using javascript or jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.