TypeError: document.getElementById (...) имеет значение null Django + JS
У меня ошибка при выполнении следующего кода:
var toppings = ['Zucchini', 'Fresh Garlic', 'Black Olives', 'Anchovies',
'Barbecue Chicken', 'Artichoke', 'Spinach', 'Ham', 'Sausage', 'Mushrooms'];
var appended = 0;
var maxAppended = 3;
document.getElementById('add').onclick = () => {
appended+=1;
if (appended <= maxAppended){
const topping = document.createElement('select', {
'name': 'Topping',
'class': 'form-control'
});
list.appendChild(topping);
toppings.forEach(function(item, i, arr) {
const ch_topping = document.createElement('option');
ch_topping.innerHTML += item;
topping.appendChild(ch_topping);
});
}
else {
alert('You should stop');
}
};
page1.html:
<div class = "form-group" id='add_one'>
<br>
<h5>You can add up to 3 toppings to your pizza!</h5>
<ol id = "list"></ol>
<button class = "btn btn-primary" id = "add" type = "submit">Add topping</button>
</div>
Этот код не работает со следующей ошибкой:
TypeError: document.getElementById(...) is null
Я включаю JavaScript в свой файл base.html, а page1.html расширяет этот файл.
Мой base.html<head>:
<title>{% block title %}{% endblock %}</title>
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity = "sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin = "anonymous">
<script src = "{% static 'js/main.js' %}"></script>
window.onload() не помог
jQuery's $(document).ready() не помогло
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Ваш файл javascript запущен до того, как кнопка существует в DOM, поэтому он не может ее найти
оберните свой код с помощью window.onload
всякий раз, когда вы обращаетесь к элементу DOM, он уже должен быть отрисован
да, я тестировал его с помощью функции оповещения, и все работает отлично
Выполните проверку null
let button = document.getElementById('id');
if (typeof button !== 'undefined' && button !== null) {
button.onclick = () => { /* Do your stuff */ };
}
затем он возвращает 'button is null'
попробуйте выполнить проверку null, как я сделал в отредактированном ответе @Desiigner
Я пробовал это, ошибка исчезла, но тоже ничего не происходит. Он просто перезагружает страницу каждый раз, когда я нажимаю кнопку.
type = "submit" кнопки должен быть удален, если вы хотите добавить слушателя.
Думаю, я не совсем понимаю, что ты имеешь в виду
В вашем HTML <button class = "btn btn-primary" id = "add" type = "submit">Add topping</button> удалите атрибут type.
странно, путь к js файлу, который вы вызываете, правильный?