Не меняется ширина картинки при изменениях блока, почему?

Question

[DimaD0106d]

const border_slider = document.querySelector('.border_slider')
const images = document.querySelectorAll('#img_1', '#img_2', '#img_3', '#img_4')

img_1.src = 'https://obou.ru/f/w/000/000/70/img_70_big.jpg'

border_slider_width = border_slider.offsetWidth

border_slider_width.onchange = function() {
	img_1.width = border_slider_width + 'px'
}

Если не делать событие onchange, оно меняется, а вот если делать, то оно не меняется, почему? Оно же должно при изменениях ширины блока, выполнять функцию, ну оно не работает(

Comments

[edward_freedom]

где обьявлена img_1?

[DimaD0106d]

edward_freedom, в images

[edward_freedom]

DimaD0106d, конкретнее можно, где обьявлена? И это не твой акк случаем второй? https://qna.habr.com/user/teski

[DimaD0106d]

edward_freedom, const images = document.querySelectorAll('#img_1', '#img_2', '#img_3', '#img_4')

[edward_freedom]

DimaD0106d, тогда несколько вопросов. Ты в курсе, что querySelectorAll принимает один лишь аргумент? В приведенном тобой коде, обьявлена переменная images, а не img_1

[DimaD0106d]

edward_freedom, не, не вкурсе, я думал querySelector принимает лишь один аргумент, а querySelectorAll, думал все. А что тогда querySelectorAll делат?

[edward_freedom]

DimaD0106d, если верить документации, то

Метод querySelectorAll() Document возвращает статический (не динамический) NodeList, содержащий все найденные элементы документа, которые соответствуют указанному селектору.

https://developer.mozilla.org/ru/docs/Web/API/Docu...

[DimaD0106d]

edward_freedom,

const logo = document.querySelector('#link_logo')
const border_slider = document.querySelector('.border_slider')
const img_1 = document.querySelector('#img_1')

border_slider_width = border_slider.offsetWidth

border_slider_width.onchange = function() {
	img_1.width = border_slider_width + 'px'
}

это тоже не работает

[edward_freedom]

DimaD0106d, если ты обращаешься к конкретному иду, то почему не воспользоваться специально предназначенной для этого функцией getElementById?
border_slider_width у тебя числовой тип, у него нет события onchange

[DimaD0106d]

edward_freedom, так?

const logo = document.getElementById('#link_logo')
const border_slider = document.querySelector('.border_slider')
const img_1 = document.getElementById('#img_1')

[edward_freedom]

DimaD0106d, без #

[DimaD0106d]

edward_freedom,

const logo = document.getElementById('link_logo')
const border_slider = document.querySelector('.border_slider')
const img_1 = document.getElementById('img_1')

border_slider_width = border_slider.offsetWidth

border_slider.style.width.onchange  = function(){
	img_1.style.width = border_slider_width + 'px'
}

и за чего оно не работает? Я же написал onchange ширине border.style

[edward_freedom]

DimaD0106d, width у тебя число, у него нет такого события. Ты какую книгу читал, что не знаешь элементарных основ?

[DimaD0106d]

edward_freedom, Выразительный JavaScript

[edward_freedom]

DimaD0106d, глянул я твою "книгу", ты зря потратил время. Читай хотя бы

Дэвид Флэнаган «JavaScript. Подробное руководство»

[DimaD0106d]

edward_freedom, спасибо за книжку

Answer 1

[Rsa97]

offsetWidth - целое число. С чего вы взяли, что у него есть метод onchange?

Comments

[DimaD0106d]

а где посмотреть какие методы есть у команд?

[Rsa97]

DimaD0106d, В документации.
https://developer.mozilla.org/en-US/docs/Web/API/H...

[Сергей delphinpro]

DimaD0106d, чтобы картинка была по ширине блока, не проще задать ей ширину 100% в css?