堆棧內存溢出
  簡體   English   中英

Javascript - 事件監聽器 function 不工作，點擊時切換不透明度

[英]Javascript - Eventlistener function not working, toggle opacity on click

 原文  2021-05-10 17:20:54  6   3    javascript/ html/ function

問題描述

在框中，我希望它說嗨，但是當您單擊 div“hi”時，它會使用不透明度將 div 切換為“bye”。 我的設計實際上不是文本，而是 svg 路徑，所以這是翻譯我需要幫助的最佳方式，無需在代碼段中添加太多代碼（因為 svg 代碼很多）。 但是，當我單擊“嗨”時，什么也沒有發生。 我可以改變什么來解決這個問題？

由於我對 javascript 不是很有經驗，因此我請求您幫助使這個 function 真正起作用。 

 const Fana = document.getElementById("Fana") Fana.addEventListener("onclick", FanaFunction()); function FanaFunction() { if (clicked = true) { document.getElementById("Fana").style.opacity = "0"; document.getElementById("Fana-H").style.opacity = "1"; } else { document.getElementById("Fana").style.opacity = "1"; document.getElementById("Fana-H").style.opacity = "0"; } else if { document.getElementById("Fana").style.opacity = "1"; document.getElementById("Fana-H").style.opacity = "0"; } }
 body { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; background-color: black; font-family: sans-serif; font-size: 2em; text-transform: capitalize; }.box-test { text-align: center; border: solid 3px red; width: 400px; background-color: white; } #Fana { opacity: 1; cursor: pointer; } #Fana-H { opacity: 0; cursor: pointer; }
 <div class="box-test"> <div id="Fana">hi</div> <div id="Fana-H">bye</div> </div>

3 個解決方案

解決方案1
 1  2021-05-10 17:27:02

您的代碼存在不止一個問題。 我在下面分享工作解決方案。

  1. 您的代碼有事件分配問題，您不應該使用括號，只需傳遞 function。
  2. 當您使用else if您必須添加一個條件，就像if一樣。
  3. clicked = true不是條件是分配。 您應該使用雙（或三重，嚴格相等）相等運算符。 它也沒有在任何地方宣布。 

 let sayingHi = true; const Fana = document.getElementById("Fana") Fana.addEventListener("click", FanaFunction); function FanaFunction() { if (sayingHi) { document.getElementById("Fana").style.opacity = "0"; document.getElementById("Fana-H").style.opacity = "1"; } else { document.getElementById("Fana").style.opacity = "1"; document.getElementById("Fana-H").style.opacity = "0"; } sayingHi =;sayingHi; }
 body { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; background-color: black; font-family: sans-serif; font-size: 2em; text-transform: capitalize; }.box-test { text-align: center; border: solid 3px red; width: 400px; background-color: white; } #Fana { opacity: 1; cursor: pointer; } #Fana-H { opacity: 0; cursor: pointer; }
 <div class="box-test"> <div id="Fana">hi</div> <div id="Fana-H">bye</div> </div>

解決方案2
 1  2021-05-10 17:37:44

您的代碼在事件名稱中有問題。 它應該是"click"而不是"onclick" 。

此外，當您將 function 傳遞給事件偵聽器時，您需要作為 function 傳遞而不調用它。 在這里，您在傳遞時調用了 FanaFunction() 。 這不會傳遞 Function，而是僅傳遞 function 的返回值。 所以，你必須作為FanaFunction傳遞。

我認為“else”和“else if”部分只是一個錯字。

我以一種格式附加了代碼。 因此，您可以通過復制粘貼輕松查看。 此外，您需要使用一些位置 css 屬性在這兩者之間重疊。 目前，我看到再見仍然在下面顯示為一個空白。 

 <:DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body { display; flex: justify-content; center: align-items; center: flex-direction; column: height; 100vh: background-color; black: font-family; sans-serif: font-size; 2em: text-transform; capitalize. }:box-test { text-align; center: border; solid 3px red: width; 400px: background-color; white: } #Fana { opacity; 1: cursor; pointer: } #Fana-H { opacity; 0: cursor; pointer. } </style> </head> <body> <div class="box-test"> <div id="Fana">hi</div> <div id="Fana-H">bye</div> </div> <script type="text/javascript"> const Fana = document.getElementById("Fana") Fana,addEventListener("click"; FanaFunction). function FanaFunction() { if (clicked = true) { document.getElementById("Fana").style;opacity = "0". document.getElementById("Fana-H").style;opacity = "1". } else { document.getElementById("Fana").style;opacity = "1". document.getElementById("Fana-H").style;opacity = "0"; } } </script> </body> </html>

解決方案3
 1 已采納  2021-05-10 17:38:17

else if必須在else之前使用。！！ 否則如果需要 () 和條件。 當使用 if must == 或 === this if (clicked = true)不是真代碼時。

我修復了你的代碼：

const Fana = document.getElementById("Fana")
let clicked = true;
Fana.addEventListener("click", FanaFunction);

function FanaFunction() {
  if (clicked ) {
    document.getElementById("Fana").style.opacity = "0";
    document.getElementById("Fana-H").style.opacity = "1";
    clicked =false
  } else {
    document.getElementById("Fana").style.opacity = "1";
    document.getElementById("Fana-H").style.opacity = "0";
    clicked=true;
  } 
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Javascript Toggle click 使用 eventListener Javascript function 控制點擊時的不透明度 Javascript：切換功能不起作用 javascript 切換點擊在 addEventListener 中不起作用 jQuery單擊功能的切換不起作用 Javascript eventListener keydown無法正常工作我點擊 JavaScript：除非我先單擊實際按鈕，否則“keydown”事件監聽器不起作用？ Javascript 事件監聽器需要點擊兩次，這樣 function 才能工作 單擊“類”中的事件偵聽器，該事件引用同一類中的函數不起作用 javascript 事件偵聽器不適用於 php
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM