在Django模板中使用JavaScript显示日期失败如何解决

问题原因 #

• JS执行顺序错误：<script>标签写在了目标DOM元素（id="date0"、id="date"）的前面，代码执行时对应元素还未被浏览器渲染，document.getElementById无法获取到有效节点，赋值操作不会生效。
• 存在重复ID：页面中同时出现了两个id="date"的元素，ID在单个页面中是唯一标识，重复会导致选择器匹配异常。
• Django模板继承规则问题：写在chatStream块外的<section>、<script>、<p id="date">内容，没有对应父模板的块承接，会被Django直接忽略，不会渲染到最终页面中。

修复方案 #

1. 清理多余代码，删除块外重复的<p id="date"></p>，所有需要生效的内容都放到父模板定义的块内。
2. 调整JS逻辑，添加DOM加载完成监听，保证节点渲染完成后再执行日期赋值操作，也可以直接把<script>放到所有目标DOM元素的后面。

修改后的子模板代码

{% extends 'chattr.html' %}

{% block chatStream %}
<section class="">
    hello
</section>
<b>smallest_steps:</b> <br> 
Hello! Please send me a message:)   <span id="date0"></span>  <br>
<p id="date"></p>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let d = new Date();
        document.getElementById("date0").innerHTML = d;
        let n =  new Date();
        let y = n.getFullYear();
        let m = n.getMonth() + 1;
        let day = n.getDate();
        document.getElementById("date").innerHTML = m + "/" + day + "/" + y;
    })
</script>
{% endblock %}

父模板chattr.html无需修改即可正常运行。

内容的提问来源于stack exchange，提问作者Katie Melosto