Как с помощью JavaScript изменить значение атрибута "style" для URL?

Question

Максим

url-rewriting

Как с помощью JavaScript изменить значение атрибута "style" для URL?

Как я могу изменить адрес изображения, используя JavaScript, при вставке нового адреса в окне POPUP? Получаю ошибку "Cannot read properties of null (reading 'value')" при попытке использовать функцию. Вот пример кода, который вызывает ошибку:

```javascript
submitAvatar.addEventListener("submit", avatarSubmit);

function avatarSubmit(evt) {
  evt.preventDefault();
  profAvatar.style.backgroundImage = `url(${avatarImput.value})`;
  closePopup(openPopupAvatarElement);
  document.removeEventListener("keydown", closeEsc);
}
```

27 января 2024 г. 9:31

Ответы на вопрос 2

Похожие вопросы

Answer 1

Ошибка "Cannot read properties of null (reading 'value')" обычно означает, что переменная, к которой вы обращаетесь, не ссылается на существующий элемент в документе. В данном случае скорее всего это переменная `avatarImput` (похоже, что тут также опечатка, и должно быть `avatarInput`).

Прежде всего, убедитесь, что элемент с HTML-страницы, значение которого вы пытаетесь получить, правильно выбран с помощью JavaScript. Элемент должен быть выбран до того, как вы сможете получить к нему доступ и взаимодействовать с его свойствами и методами.

Ваша функция `avatarSubmit` пытается установить стиль `backgroundImage` для элемента `profAvatar`, используя значение из `avatarImput.value`. Проверьте следующее:

1. Переменная `avatarImput` должна быть проинициализирована с помощью методов `document.querySelector` или `document.getElementById` (или других подобных) до того, как вы пробуете использовать её значение. Убедитесь, что селектор правильный и элемент существует в DOM.

```javascript
// Например:
const avatarInput = document.querySelector('#your-input-element-id');
```

2. Проверьте, что у элемента `profAvatar` тоже есть ссылка на существующий элемент DOM, и что его стили можно менять.

```javascript
// Например:
const profAvatar = document.querySelector('.your-avatar-element-class');
```

3. Убедитесь, что событие `submit` корректно привязано к форме. Переменная `submitAvatar` должна ссылаться на форму, где вы хотите отслеживать событие сабмита.

```javascript
// Например:
const submitAvatar = document.querySelector('#your-form-id');
```

4. Если вы вызываете `avatarSubmit` из этого же файла JavaScript, убедитесь, что весь DOM полностью загружен перед тем, как вы начинаете выбирать элементы и добавлять обработчики событий. Это можно сделать, поместив ваш код внутри обработчика событий `DOMContentLoaded` или если вы используете `<script>` тег в HTML, то удостоверьтесь, что он расположен после всех элементов в теле документа или установлен с атрибутом `defer`.

```javascript
document.addEventListener('DOMContentLoaded', () => {
  // Весь ваш код, что выбирает элементы и привязывает обработчики событий, здесь
});
```

Исправив эти потенциальные проблемы, ваша функция `avatarSubmit` должна начать работать корректно, и вы сможете изменить `style` элемента `profAvatar` без ошибок.

Answer 2

Все правильно сделал, забыл тут точку поставить ((( 
 
 const avatarImput = document.querySelector("‍♂️.popup__input_type_urlavatar");