我的div不會使用javascript函數更改寬度

Question

我制作了一個帶有兩個div的臨時進度條，並使用css進行樣式設置以使其相互適應以制作進度條。 我有一個按鈕，可在單擊按鈕時更改內部div的寬度，但是單擊按鈕不會更改div的寬度。 我確保沒有做任何錯誤，當我單擊按鈕時，Chrome瀏覽器中的javascript控制台也沒有出現錯誤。 無論如何，這是我的代碼：

 function clickMe() { var newExp = parseInt(document.getElementById("expHold").innerHTML); document.getElementById("bar2").style.width = newExp + 'px'; document.getElementById("expHold").innerHTML += '+1'; document.getElementById("expHold").innerHTML = eval(document.getElementById("expHold").innerHTML); } 

 #bar1 { border: 2px solid gold; height: 15px; width: 100px; background-color: blue; border-radius: 8px; } #bar2 { height: 15px; width: 1px; background-color: skyblue; border-radius: 8px; } 

 <div id="bar1"> <div id="bar2"> </div> </div> <p> <input type="button" value="Click me" onClick="clickMe()" /> <span id="expHold" style="color:black;">1</span> 

感謝您告訴我我做錯了什么，謝謝！

Answer 1

1. 請不要使用內聯JavaScript。 它降低了可讀性和可維護性。
2. 您應該使用JavaScript變量來存儲exp ，這樣您就不必重復查詢DOM了（這是過程密集型的）。
3. 您應該緩存DOM對象，而不是在每次迭代時都創建新的DOM對象。
4. 您可以使用前綴遞增修飾符來遞增先前創建的exp變量
   • 前綴增量修飾符將返回增量值。
   • 后綴增量修飾符將在增量之前返回該值。

 var exp = 0, current; var bar1 = document.getElementById("bar1"); var bar2 = document.getElementById("bar2"); var hold = document.getElementById("expHold"); var max = bar1.clientWidth; document.getElementById('my-button').onclick = function() { // Don't go past the end. if(bar2.clientWidth < max) { current = ++exp; hold.textContent = current; bar2.style.width = current + 'px'; } } 

 #bar1 { border: 2px solid gold; height: 15px; width: 100px; background-color: blue; border-radius: 8px; } #bar2 { height: 15px; width: 0px; background-color: skyblue; border-radius: 8px; } 

 <div id="bar1"> <div id="bar2"> </div> </div> <p> <input type="button" value="Click me" id="my-button" /> <span id="expHold" style="color:black;">0</span>