[英]Updating values in Javascript/HTML
I have this tag in my HTML: 我的HTML中有这个标记:
<p id="moneyvalue"></p>
And I have this Javascript code: 我有这个Javascript代码:
var moneyBalance = 0;
document.getElementById('moneyvalue').innerHTML=moneyBalance;
I have onclick=...
, which causes functions to add to the moneyBalance
variable. 我有
onclick=...
,这导致函数添加到moneyBalance
变量。 The problem is that the paragraph element with the moneyvalue
id does not update until I call the last line of code I mentioned. 问题是,直到我调用我提到的代码的最后一行,具有
moneyvalue
id的段落元素才会更新。 Is there a way to constantly update the element without needing to call that line after every update I make to the moneyBalance
variable, or is that the only way to do that? 有没有一种方法可以不断更新元素,而无需在我对
moneyBalance
变量进行每次更新之后调用该行,或者这是唯一的方法吗?
You could make that code run every time your moneyBalance value is changed by putting them both into a function like so: 通过将它们都放入如下所示的函数中,可以使您的moneyBalance值每次更改时都运行该代码:
function change_balance(new_value) {
moneyBalance = new_value;
document.getElementById('moneyvalue').innerHTML = moneyBalance;
}
So now instead of calling moneyBalance = X
, you call change_balance(X)
and it will update at the same time. 因此,现在不用调用
moneyBalance = X
,而是调用moneyBalance = X
change_balance(X)
,它将同时更新。
No, it isn't possibile. 不,这不可能。 However, I'd suggest to use
textContent
property instead of innerHTML
, since it doesn't trigger the HTML parser. 但是,我建议使用
textContent
属性而不是innerHTML
,因为它不会触发HTML解析器。
you can use setInterval()
您可以使用
setInterval()
So your code becomes 所以你的代码变成
setInterval(function(){ document.getElementById('moneyvalue').innerHTML=moneyBalance; }, updateTime);
where updateTime
in millisecs means when it will update. 以毫秒为单位的
updateTime
表示何时更新。
I don't know how do you update moneyBalance
variable but here's a jQuery exapmle of auto update values. 我不知道如何更新
moneyBalance
变量,但这是自动更新值的jQuery示例。 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.