Я уже рассмотрел многочисленные вопросы, и я не смог найти подобную проблему. Я пытаюсь дать кнопке функцию, которая обновляет переменную (в частности число, т.е. кнопка нажатие >> 0
становится 1
) и записывает ее в innerHTML
div
. Он обновляется в уведомлении, но не обновляет innerHTML
.
var example = 0;
var exampleDiv = document.getElementById('exampleDiv');
function buyExample() {
example += 1;
}
exampleDiv.innerHTML = 'You have ' + example + ' examples.';
Номер, отображаемый на веб-странице, равен 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>
Ваш код работает некорректно, так как 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>
Из контекста, который вы указали, ваше утверждение:
exampleDiv.innerHTML = 'You have ' + example + ' examples.';
Будет запускаться только один раз, когда Javascript инициализируется, и в этот момент переменная примера по-прежнему установлена в 0. Если вы хотите, чтобы div обновлялся каждый раз, когда вы используете кнопку, он также должен быть включен в метод buyExample().
function buyExample() {
example += 1;
exampleDiv.innerHTML = 'You have ' + example + ' examples.';
}
Вам нужно переместить оператор, который обновляет 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>
exampleDiv.innerHTML = ...
находился внутри функцииbuyExample
, но на самом деле вы не поделились достаточным количеством кода, чтобы кто-либо был в этом уверен.