Django和JavaScript：document.getElementById始终返回未捕获类型错误：无法设置null的属性(设置“innerHtml”)

我写信给你是因为我被困在一个基本的操作上（几乎是羞愧）。我正在做一个Django项目，我想做的是：在两个'span'标签中显示列表的长度。这不是我第一次这样做，我总是设法做到这一点。但现在我不明白为什么它不工作。下面是代码：
我的索引.html：

{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Free Attitude</title>
    <!-- BOOTSTRAP CSS -->
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <!-- CSS -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <!-- JS -->
    <script type="text/javascript" src="{% static 'js/templatesList.js' %}"></script>
</head>

<body>
    {% include '_header.html' %}
    <main class='home-main'>
        <div class="container">
            <section class="row gy-3">
                <!-- FOR LG SCREEN -->
                <div class="col-md-6 text-container d-md-block d-none">
                    <h2>Modelli per siti web</h2>
                    <h6>Dai un'occhiata ad alcuni modelli già pronti, protresti trovare qualcosa di tuo interesse.</h6>
                    <a href="{% url 'websiteEcomm:home' %}">Vedi tutti e <span id="total-templates-lg"></span> i
                        modelli
                        disponibili</a>
                </div>
                <div class="col-md-6 d-md-block d-none">
                    <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel"
                        data-bs-interval="2000">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="{% static 'preview-img/arsha.png' %}" class="d-block w-100" alt="...">
                            </div>
                            <div class="carousel-item">
                                <img src="{% static 'preview-img/digimedia.png' %}" class="d-block w-100" alt="...">
                            </div>
                            <div class="carousel-item">
                                <img src="{% static 'preview-img/leadership-event.png' %}" class="d-block w-100"
                                    alt="...">
                            </div>
                            <div class="carousel-item">
                                <img src="{% static 'preview-img/firstPortfolio.png' %}" class="d-block w-100"
                                    alt="...">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- FOR SM SCREEN -->
                <div class="col-sm-12 text-container text-center d-md-none">
                    <h2>Modelli per siti web</h2>
                    <h6>Dai un'occhiata ad alcuni modelli già pronti, protresti trovare qualcosa di tuo interesse.</h6>
                </div>
                <div class="col-sm-12 d-md-none">
                    <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel"
                        data-bs-interval="2000">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="{% static 'preview-img/arsha.png' %}" class="d-block w-100" alt="...">
                            </div>
                            <div class="carousel-item">
                                <img src="{% static 'preview-img/digimedia.png' %}" class="d-block w-100" alt="...">
                            </div>
                            <div class="carousel-item">
                                <img src="{% static 'preview-img/leadership-event.png' %}" class="d-block w-100"
                                    alt="...">
                            </div>
                            <div class="carousel-item">
                                <img src="{% static 'preview-img/firstPortfolio.png' %}" class="d-block w-100"
                                    alt="...">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 text-container text-center d-md-none">
                    <a href="{% url 'websiteEcomm:home' %}">Vedi tutti e <span id="total-templates-sm"></span> i
                        modelli
                        disponibili</a>
                </div>
            </section>
        </div>
    </main>
    <!-- BOOTSTRAP JS -->
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>

</body>

</html>

我的js（名为templatesList.js）文件：

const templatesList = [
    'arsha',
    'digimedia',
    'firstPortfolio',
    'leadership-event',
    'medicio'
];

document.addEventListener('DOMContentLoaded', function () {
    const totalTemplatesLg = document.getElementById('total-templates-lg');
    const totalTemplatesSm = document.getElementById('total-templates-sm');

    totalTemplatesLg.innerHtml = `${templatesList.length}`;
    totalTemplatesSm.innerHtml = `${templatesList.length}`;
})

我都试过了。
我尝试将脚本移到html文件的底部，同时删除“DomContentLoaded”事件。
我还尝试在两个'span'标签中用'class'替换id，并创建一个for循环。我也尝试使用forEach循环。我还尝试使用'Array.from'，并再次使用循环。但这些都不起作用。我总是得到相同的错误，即：未捕获的类型错误：无法在HTMLDocument处设置null属性（设置“innerHtml”）。

Django和JavaScript：document.getElementById始终返回未捕获类型错误：无法设置null的属性(设置“innerHtml”)

1条答案

相关问题

热门标签

最新问答