первый запуск в хроме

[yarnik]

приветствую.
помогите понять в чем проблемка зарыта.
при первом запуске и первом клике на картинку в хроме не отображается фотка, второй и последующие разы все нормально.

<img src="foto.jpg" class="right toModal">

<script>
window.onload = function () {
	// Modal window
	var image = document.getElementsByClassName("toModal");
	if (image.length) {
		document.body.innerHTML += '<div id="modalDiv"><img id="modalImg"></div>';
		var modalDiv = document.getElementById("modalDiv");
		var modalImg = document.getElementById('modalImg');
		for (var i = 0; i < image.length; i++) {
			image[i].onclick = function(){
				modalDiv.style.display = "block";
				modalImg.src = this.src;
				var w = window.innerWidth;
				var h = window.innerHeight;
				var coef = 2;
				// смотрим что бы поместились в экран
				if (modalImg.naturalWidth*coef > w || modalImg.naturalHeight*coef > h) {
					coef = modalImg.naturalWidth*coef / w > modalImg.naturalHeight*coef / h ? w / modalImg.naturalWidth : h / modalImg.naturalHeight;
				}
				modalImg.style.height = modalImg.naturalHeight*coef + 'px';
				modalImg.style.width = modalImg.naturalWidth*coef + 'px';
			}
		}
		modalDiv.onclick = function() {
			modalDiv.style.display = "none";
		}
	}
}
</script>

[ksa]

document.body.innerHTML += '<div id="modalDiv"><img id="modalImg"></div>';

Не делай так...

[yarnik]

Не делай так...

Как тогда?
Сеошники требуют не вставлять прямо в html код.

[рони]

Как тогда?

Изменение документа

[yarnik]

отремонтировал Хром, поломал ИЕ

<script>
window.onload = function () {
	// Modal window
	var image = document.getElementsByClassName("toModal");
	if (image.length) {
		//document.body.innerHTML += '<div id="modalDiv"><img id="modalImg"></div>';
		let div = document.createElement('div');
		div.id = "modalDiv";
		document.body.append(div);
		let img = document.createElement("img");
		img.id = "modalImg";
		document.getElementById("modalDiv").appendChild(img);
		var modalDiv = document.getElementById("modalDiv");
		var modalImg = document.getElementById('modalImg');
		for (var i = 0; i < image.length; i++) {
			image[i].onclick = function(){
				modalDiv.style.display = "block";
				modalImg.src = this.src;
				var w = window.innerWidth;
				var h = window.innerHeight;
				var coef = 2;
				// смотрим что бы поместились в экран
				if (modalImg.naturalWidth*coef > w || modalImg.naturalHeight*coef > h) {
					coef = modalImg.naturalWidth*coef / w > modalImg.naturalHeight*coef / h ? w / modalImg.naturalWidth : h / modalImg.naturalHeight;
				}
				modalImg.style.height = modalImg.naturalHeight*coef + 'px';
				modalImg.style.width = modalImg.naturalWidth*coef + 'px';
			}
		}
		modalDiv.onclick = function() {
			modalDiv.style.display = "none";
		}
	}
}
</script>

[рони]

yarnik,
строка 9, сделайте как в строке 12.

[yarnik]

document.body.appendChild(div);

Благодарю, заработало!

Было бы очень великолепно для собственного осознания осознать почему не работало в начальном варианте и почему ИЕ не воспринял append

[рони]

почему ИЕ не воспринял append

ответ по ссылке, в конце страницы.
https://developer.mozilla.org/ru/doc...entNode/append

[рони]

почему не работало в начальном варианте

Будьте внимательны: «innerHTML+=» осуществляет перезапись

[j0hnik]

Как тогда?
Сеошники требуют не вставлять прямо в html код.

Сеошники из прошлого века, уже года два и яндекс и гугл читает содержимое скриптов