Кнопка JS не обновляет innerhtml

1

Я уже рассмотрел многочисленные вопросы, и я не смог найти подобную проблему. Я пытаюсь дать кнопке функцию, которая обновляет переменную (в частности число, т.е. кнопка нажатие >> 0 становится 1) и записывает ее в innerHTML div. Он обновляется в уведомлении, но не обновляет innerHTML.

var example = 0;
var exampleDiv = document.getElementById('exampleDiv');

function buyExample() {
  example += 1;
}

exampleDiv.innerHTML = 'You have ' + example + ' examples.';

Номер, отображаемый на веб-странице, равен 0.

  • 3
    Можете ли вы предоставить свой HTML-код?
  • 1
    Возможно, вы хотите, чтобы exampleDiv.innerHTML = ... находился внутри функции buyExample , но на самом деле вы не поделились достаточным количеством кода, чтобы кто-либо был в этом уверен.
Показать ещё 3 комментария
Теги:

4 ответа

0
Лучший ответ

Рабочий код, основанный на моем комментарии выше:

var example = 0;
var exampleDiv = document.getElementById('exampleDiv');

function buyExample() {
  example += 1;
  exampleDiv.innerHTML = 'You have ' + example + ' example' + (example !== 1 ? 's' : '') + '.';
}

document.getElementById("incrementButton").onclick = buyExample;
<button id="incrementButton">Click me</button>

<div id="exampleDiv">You have 0 examples.</div>
1

Ваш код работает некорректно, так как exampleDiv.innerHTML устанавливается только один раз. Вы должны переместить его в функцию.

var example = 0;
var exampleDiv = document.getElementById('exampleDiv');
render();

function buyExample() {
  example += 1;
  render();
}

function render() {
  exampleDiv.innerHTML = 'You have ' + example + ' examples.';
}
<button id="button" onclick="buyExample()">Button</button>

<div id="exampleDiv"></div>
0

Из контекста, который вы указали, ваше утверждение:

exampleDiv.innerHTML = 'You have ' + example + ' examples.';

Будет запускаться только один раз, когда Javascript инициализируется, и в этот момент переменная примера по-прежнему установлена в 0. Если вы хотите, чтобы div обновлялся каждый раз, когда вы используете кнопку, он также должен быть включен в метод buyExample().

function buyExample() {
    example += 1;
    exampleDiv.innerHTML = 'You have ' + example + ' examples.';
}
0

Вам нужно переместить оператор, который обновляет DOM в функции, которая запускается при каждом нажатии кнопки. То, как вы это делаете, innerHTML устанавливается один раз, когда страница загружается, а example переменной обновляется на каждом клике, но вы никогда не устанавливаете значение example на страницу еще раз.

var example = 0;
var exampleDiv = document.getElementById('exampleDiv');

function buyExample() {
  example += 1;
  exampleDiv.innerHTML = 'You have ' + example + ' examples.';
}
<div id="exampleDiv">You have 0 examples.</div>
<button onclick="buyExample()">buy</button>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню