Обновление значений в Javascript / HTML

Question

Обновление значений в Javascript / HTML

0

У меня этот тег в моем HTML:

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

И у меня есть этот код Javascript:

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

У меня onclick=..., что заставляет функции добавлять к переменной moneyBalance. Проблема в том, что элемент абзаца с идентификатором moneyvalue не обновляется, пока я не вызову последнюю строку кода, о которой я упоминал. Есть ли способ постоянно обновлять элемент без необходимости вызывать эту строку после каждого обновления, которое я делаю для переменной moneyBalance, или это единственный способ сделать это?

zchbrntmr 28 нояб. 2013, в 22:46

Источник

Теги:

javascript

html

getelementbyid

4 ответа

Ещё вопросы

user2816674 · Answer 1 · 2013-11-28T18-57-00.000Z

Вы можете сделать этот код запускаемым каждый раз, когда значение moneyBalance будет изменено, поставив их в одну из функций:

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

Теперь вместо вызова moneyBalance = X вы вызываете change_balance(X) и он будет обновляться одновременно.

mdesdev · Answer 2 · 2013-11-28T20-02-00.000Z

Я не знаю, как вы обновляете переменную 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>

Carlo Cannas · Answer 3 · 2013-11-28T19-47-00.000Z

Нет, это невозможно. Однако я бы предложил использовать свойство textContent вместо innerHTML, поскольку он не вызывает парсер HTML.

yayaya · Answer 4 · 2013-11-28T19-46-00.000Z

вы можете использовать setInterval()

Таким образом, ваш код становится

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

где updateTime в миллисекундах означает, когда он будет обновляться.