每次單擊淡入淡出按鈕都會使背景框不斷淡入淡出

Question

全新的編碼。 每次單擊時，都試圖讓“淡入淡出”按鈕淡出一點。 我已經使用這段代碼來擴大和縮小盒子，我試圖對不透明度做同樣的事情：

 document.getElementById("growbutton").addEventListener("click", function() { var growVariable = 10; var newValueHeight = parseInt(document.getElementById("box").style.height) document.getElementById("box").style.height = newValueHeight + growVariable + "px"; var newValueWidth = parseInt(document.getElementById("box").style.width) document.getElementById("box").style.width = newValueWidth + growVariable + "px"; }); document.getElementById("fadebutton").addEventListener("click", function() { var opVariable =.2; var newOpValue = parseInt(document.getElementById("box").style.opacity) document.getElementById("box").style.opacity = newValueHeight - opVariable; });

 <div id="box" style="height: 150px; max-height: 600px; min-height: 5px; width:150px; max-width: 600px; min-width: 5px; background-color:orange; margin:50px"></div> <button id="fadebutton">Fade</button> <button id="growbutton">Grow</button>

你能告訴我我錯過了什么，所以每次點擊框都會消失。2？

Answer 1

您現有的代碼會產生錯誤： Uncaught ReferenceError: newValueHeight is not defined 。 有幾個問題：

1. 您偶然引用了newValueHeight而不是newOpValue 。
2. parseInt()將返回integer ，即，如果當前不透明度為 0.8，則parseInt(0.8)返回1 。 您需要使用parseFloat()來獲取浮點數。
3. 最初， style.opacity是undefined的，因為它尚未設置。 你應該使用opValue =... || 1 opValue =... || 1如果尚未設置，則默認為 1。

 let box = document.getElementById('box'), fadeBtn = document.getElementById('fadebutton'), growBtn = document.getElementById('growbutton'); growBtn.addEventListener('click', function() { let growVariable = 10, boxHeight = parseInt(box.style.height), boxWidth = parseInt(box.style.width); box.style.height = boxHeight + growVariable + "px", box.style.width = boxWidth + growVariable + "px"; }); fadeBtn.addEventListener("click", function() { let opVariable =.2, opValue = parseFloat(box.style.opacity) || 1; box.style.opacity = opValue - opVariable; });

 <div id="box" style="height: 100px; max-height: 600px; min-height: 5px; width:100px; max-width: 600px; min-width: 5px; background-color:orange; margin:1rem"></div> <button id="fadebutton">Fade</button> <button id="growbutton">Grow</button>

Answer 2

處理非整數或小數點時需要使用parseFloat ，因為parseInt返回 integer 或整數

 document.getElementById("fadebutton").addEventListener("click", function() { //var opVariable =.2; let box = document.getElementById("box") let currentOpacity = parseFloat(box.style.opacity) box.style.opacity = currentOpacity -.2 });

 <div id="box" style="height: 150px; max-height: 600px; min-height: 5px; width:150px; max-width: 600px; min-width: 5px; background-color:orange; margin:50px;opacity:1"></div> <button id="fadebutton"> Fade </button>

Answer 3

如果您只想淡化圖像 onclick，您可以簡單地減少style.opacity屬性。 像這樣的東西：

 const box = document.querySelector('#box'); document.addEventListener('click', e => { if (e.target.id === 'fadebutton') { if (box.style.opacity > 0) { box.style.opacity -=.2; } } });

 <div id="box" style="height: 150px; max-height: 600px; min-height: 5px; width:150px; max-width: 600px; min-width: 5px; background-color:orange; margin:50px; opacity: 1"></div> <button id="fadebutton">Fade</button>

Answer 4

 document.getElementById("fadebutton").addEventListener("click", function() { //var opVariable =.2; let box = document.getElementById("box") let currentOpacity = parseFloat(box.style.opacity) box.style.opacity = currentOpacity -.2 });

 <div id="box" style="height: 150px; max-height: 600px; min-height: 5px; width:150px; max-width: 600px; min-width: 5px; background-color:orange; margin:50px;opacity:1"></div> <button id="fadebutton"> Fade </button>