Django项目中HTML脚本无法生成新文本框问题求助

你的代码存在两个核心问题导致脚本无法运行，以下是具体问题和修复后的代码：

核心问题点 #

• 缺少目标容器：页面中没有定义id="questions"的元素，执行document.getElementById("questions")会返回null，无法完成元素追加操作。
• innerHTML语法错误：直接将HTML代码裸写在赋值语句中，没有用引号包裹成字符串，触发JavaScript语法错误，导致整个脚本失效。

修复后的完整代码 #

{% extends "index.html" %}

{% block content %}
    <div>
        <h1 class="text-center">Multiple-Choice-Aufgaben</h1>
    </div>
    <br>
    <div>
        <input type="text" name="form-name" placeholder="Form Name" class="form-control">
    </div>
    <br>
    <!-- 新增承载所有问题的容器 -->
    <div id="questions">
        <!-- 初始问题块移入容器内 -->
        <div style="border: 1px solid black">
            <input type="text" name="I" placeholder="Frage hier hinschreiben" class="form-control">
            <br>
            <i>Short answered text</i>
        </div>
        <br>
    </div>
    
    <button type="button" class="btn btn-lg btn-outline-primary" onclick="createNewQuestion();">Neue Frage hinzufügen</button>
    <button type="button" class="btn btn-lg btn-outline-success">Aufgabenblatt erstellen</button>

<script>
    let questionCount = 0;
    function createNewQuestion() {
        let div = document.createElement("div");
        let br = document.createElement("br");
        div.setAttribute("style", "border: 1px solid black");
        // 用反引号包裹HTML字符串，支持模板变量插值
        div.innerHTML = `<input type="text" name="${questionCount}" placeholder="Frage hier einfügen:" class="form-control"><br><i>Kurze Antwort</i>`;
        document.getElementById("questions").appendChild(div);
        document.getElementById("questions").appendChild(br);
        questionCount++;
    }
</script>

{% endblock %}

额外说明 #

• 用反引号`包裹HTML字符串，既解决语法问题，又能通过${questionCount}实现变量插值，比普通引号更灵活。
• 将初始问题移入questions容器，保证所有问题结构统一，后续提交表单时也更易批量处理数据。
• 变量名改为小驼峰（如div而非DIV），符合JavaScript编码规范，提升代码可读性。

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