我的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>