Функция Javascript останавливается после определенной строки

Question

Я пытаюсь создать функцию javascript, которая посещает и центрирует изображение до 1000 пикселей. Для этого я беру ширину, вычитаю 1000, разделим на 2 и умножьте на -1. Затем я беру это значение и назначаю его в поле margin-left и margin-right. У меня он настроен на загрузку страницы. По какой-то причине он не выполняет мою первую строку кода. Взгляните ниже. (Отладочные оповещения используются для отладки)

Javascript

function crop() 
{ 
alert("debug") 
width = document.getElementById(slide).width 
alert("debug") 
width = -1((width - 1000)/2) 
alert("debug") 
document.getElementById(slide).setAttribute("style","margin-left" + width + "px") 
alert("debug") 
document.getElementById(slide).setAttribute("style","margin-right" + width + "px") 
alert("debug") 
} 

Это элемент Я пытаюсь заставить его применить все это.

Элемент

<div id="mySlides" style="width:1000px; overflow:hidden;"> 
<img src="img/1.jpg" onclick="slideshow()" id="slide" /> 
</div> 

Как вы можете видеть, он отображает только первое предупреждение отладки, и больше ничего после этого не показывать. Может кто-нибудь объяснить, почему он игнорирует остальную часть кода?

Answer 1

slide - ссылка на переменную с именем slide. Вероятно, вы хотите "slide" (строка), так как ваш img элемент имеет id="slide".

Вы должны потратить некоторое время на ознакомление с инструментами отладки вашего браузера (alert() - это ужасный способ отладки). Было бы отметил ...

ReferenceError: slide is not defined

Answer 2

Вы недостающие разделители вокруг строки здесь:

width = document.getElementById("slide").width; 

Вы пропускаете оператор умножения здесь:

width = -1 * ((width - 1000)/2); 

У вас не хватает строковые разделители и двоеточия в декларациях стиля, а также вы должны соединить стили, иначе вторая будет перезаписываться первой:

document.getElementById("slide").setAttribute("style","margin-left:" + width + "px;margin-right:" + width + "px");