logo标签列表

类型错误：document.getElementById(...)为空 Django + JS

javascriptdjango
3
我在执行下面代码时遇到了一个错误：
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

我在我的 base.html 文件中包含了 JavaScript，并且 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的 $(document).ready() 也没有帮助 ```
3个回答
3

您的JavaScript文件在按钮存在于DOM之前运行，因此找不到它。

使用window.onload包装您的代码

每当访问DOM元素时，它必须已经呈现出来

奇怪，你正在调用的js文件路径正确吗？ - Henrique Viana
是的，我通过使用警告功能进行了测试，一切都完美无缺。 - Desiigner
0

执行一个 null 检查器

let button = document.getElementById('id');

if(typeof button !== 'undefined' && button !== null) {
  button.onclick = () => { /* Do your stuff */ };
}
然后它会返回“按钮为空”。 - Desiigner
尝试执行像我在编辑的答案@Desiigner中所做的null检查器。 - fortunee
我已经尝试过了，错误消失了，但是什么也没有发生。每次我按按钮时，它只是重新加载页面。 - Desiigner
0

如果您想添加监听器，必须消除按钮的type="submit"。

我猜我不太明白你的意思。 - Desiigner
在你的HTML <button class="btn btn-primary" id="add" type="submit">Add topping</button> 中删除 type 属性。 - Thevs
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接