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

请不要使用内联JavaScript。它降低了可读性和可维护性。
您应该使用JavaScript变量来存储exp，这样您就不必反复查询过程密集型的DOM。
您应该缓存DOM对象，而不是在每次迭代时创建新对象。
您可以使用prefix increment modifier增加先前创建的exp变量
- 前缀增量修饰符将返回递增的值。
- 后缀增量修饰符将在递增前返回值。

＆＃13;

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';
  }
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

我的div不会改变我的javascript函数的宽度

1 个答案: