更新值/ HTML

Question

我有這個標記在我的HTML：

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

而且我有這樣的Javascript代碼：

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

我有onclick=...，這會導致功能添加到moneyBalance變量。問題是，帶有moneyvalue id的段落元素不會更新，直到我調用我提到的最後一行代碼。有沒有辦法不斷更新元素，而無需在對moneyBalance變量進行每次更新後調用該行，還是唯一的方法？

Answer 1

不，它不可能。但是，我建議使用textContent屬性而不是innerHTML，因爲它不會觸發HTML解析器。

Answer 2

你可以把這些代碼通過把他們兩個到一個函數，像這樣運行每次你moneyBalance值發生改變時：

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

所以現在不是調用moneyBalance = X的，你叫change_balance(X)，它會在更新同時。

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>