Разочарование Javascript, связанное с DOM, который работает в 1 месте, похоже, не работает в другом месте

Question

ПРОБЛЕМА

Это работает, если я уберу комментарий

    //document.getElementById('formtimer').innerHTML = TimeStr; // Shows 00:15:00

Прекрасно работает. Итак, я это комментирую и ...

Я хотел сделать графический счетчик, поэтому я пошел в Фотошоп и сделал 0-9 и попробовал это ...

var imgCounter = document.getElementById('formtimer');
imgCounter.src = "graphics/odometers/white and blue with black background/1.png";

Когда 1 никогда не рисовался, я помещал это в HTML (на случай, если мне уже нужно было изображение) ...

<td class="tbl_col1"><div align="right" id="formtimer"><img src="graphics/odometers/white and blue with black background/0.png" /></div></td>

ТАК ... он рисует 0 на экране, и javascript должен изменить его на 1. Я думал, что путь был неправильным, поэтому я играл с этим. Я даже скопировал приведенный ниже код из другой функции (которая работает) сюда - и это не сработало (исходный идентификатор для «другого» рабочего кода был другим. Я изменил его на «formtimer», когда скопировал его в этот нерабочий код). сценарий.

var img_sad = "graphics/signup/smiley-sad006.gif";
var imgUsername = document.getElementById('formtimer');
imgUsername.src = img_sad;

Я запутался, почему innerHTML работает нормально, а моя графика не работает. Я попытался отладки в Firebug, и никаких ошибок не появляется.

Пожалуйста и еще раз спасибо!

Answer 1

document.getElementById('formtimer'); получает элемент <div>, а imgCounter.src = "..." устанавливает атрибут src <div>, который не имеет значения.

Вместо этого вы должны получить элемент <img>.Вы можете сделать это, используя свойство firstChild или добавив идентификатор к элементу <img>.