Почему картинка не меняет размер?

Question

[Crushing]

Почему не работает? При нажатии на картинку она должна менять размеры.
https://jsfiddle.net/Lozdra47/

Comments

[gleendo]

const img = document.getElementById("xxxten");

document.querySelector("img").addEventListener("click", () => img.style.width = "300px", false);

Answer 1

[Stalker_RED]

Вместо style.width = 300 нужно style.width = 300 + 'px';

UPD: уменьшение и увеличение в полтора раза по клику https://jsfiddle.net/Lozdra47/7/

Answer 2

[0xD34F]

Потому, что

1. Вместо просто числа следует указывать пиксели: 300 ---> '300px'.

2. jsfiddle по умолчанию оборачивает код в window.onload, соответственно, функция, которую вы пытаетесь вызывать в инлайновом обработчике клика, не является глобальной. Используйте querySelector + addEventListener вместо инлайнового обработчика. (UPD. Исправили эту дичь, неактуально).

#xxxten.big {
  width: 300px;
}

document.querySelector('#xxxten').addEventListener('click', function() {
  this.classList.toggle('big');
});

Comments

[Crushing]

А как сделать так, что бы при втором клике оно возвращалось к обычному размеру.

[0xD34F]

Дополнил ответ.