Question

我的HTML中有这个标记：

<p id="moneyvalue"></p>

我有这个Javascript代码：

var moneyBalance = 0;
document.getElementById('moneyvalue').innerHTML=moneyBalance;

我有onclick=...，这导致函数添加到moneyBalance变量。问题是带有moneyvalue id的段落元素在我调用我提到的最后一行代码之前不会更新。有没有办法不断更新元素而不需要在我对moneyBalance变量进行每次更新后调用该行，或者这是唯一的方法吗？

Answer 1

每次将moneyBalance值更改为像这样的函数时，你可以让代码运行：

function change_balance(new_value) {
    moneyBalance = new_value;
    document.getElementById('moneyvalue').innerHTML = moneyBalance;
}

现在，您不必致电moneyBalance = X，而是致电change_balance(X)，它会同时更新。

Answer 2

不，这是不可能的。但是，我建议使用textContent属性而不是innerHTML，因为它不会触发HTML解析器。

Answer 3

您可以使用setInterval()

所以你的代码变成了

setInterval(function(){ document.getElementById('moneyvalue').innerHTML=moneyBalance; }, updateTime);

其中updateTime以毫秒为单位表示何时更新。

Answer 4

我不知道你如何更新moneyBalance变量，但这里是一个自动更新值的jQuery exapmle。 FIDDLE

<div class="wrapper">
  <input type="text" id="val1"/> 
  <p id="moneyvalue"></p>
</div>

<!-- Or jQueryUI Slider version-->

<div class="wrapper">
  <input type="text" id="val2"/>
  <div id="slider"></div>
</div>


.wrapper {
  width: 310px;
  height: 20px;
  margin: 10px;
}
p,
#val2 {
  font-family: Verdana;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: blue;    
}
#val1 {
  float: left;
  width: 207px;
  margin: 0 10px;
}
#val2 {
  float: right;
  width: 50px;
  margin: -4px 0;
}
p {
  display: block;
  float: right;
  width: 50px;
  height: 20px;
  margin: 0;
  padding: 0 2px;
  border: 1px solid #bbb;
}
#slider {
  width: 200px;
  margin: 50px 0 0 20px;
}

<script>
$(function() {

  $('#val1').keyup(function() {
    $('#moneyvalue').text('$'+$(this).val());
  }).change(function() {
     if(!$('#val1').val()) {
        $('#moneyvalue').text('$0');
     }
  });

  $('#moneyvalue').text('$0');


  // *** Or jQueryUI Slider version ***************


  $('#slider').slider({
     range: 'min',
     min: 0,
     max: 500,
     slide: function(event, sl) {
       $('#val2').val('$' + sl.value);
     }
  });

  $('#val2').val('$'+$('#slider').slider('value'));

});
</script>

在Javascript / HTML中更新值

4 个答案: