JavaScript 函数在 Django 上不起作用

Question

加载第一页时，我希望用户看到所有音乐，但如果他从 RadioButton 中选择一个列表，我只想要该列表中的音乐，但 javascript 函数不起作用。

让我补充一点，我通常不知道 JavaScript，但我需要使用它。

<div style = "margin-top : 100px;"class = "container">
        {% for table in tables %}
        <input type="radio" name="list1" onclick="mL('{{table}}')"> {{table}}
        {% endfor %}
        <div align="center">
            <audio class="my_audio" controls="controls" autoplay="autoplay" style="width:500px;"></audio>
            <ul>
            {% for table in tables  %}
                {% for music in musics %}
                    <li style="list-style-type:None">
                        <a id="{{table}}" href="javascript:void(0);" onclick="playSong('{{music}}')">{{music}}</a>
                    </li> 
                {% endfor %}
            {% endfor %}
                {% for music in musics %}
                    <li style="list-style-type:None">
                        <a id="default" href="javascript:void(0);" onclick="playSong('{{music}}')">{{music}}</a>
                    </li> 
                {% endfor %}

            </ul>
        </div>
    </div>

<script> function mL(x)
    {
        {% for table in tables  %}
            if (x=={{table}})
            document.getElementById("{{table}}").style.display="block";
            document.getElementById("default").style.display="none";
        {% endfor %}
            else
            document.getElementById("{{table}}").style.display="none";
            document.getElementById("default").style.display="block";
            return;
    }
    </script>

Answer 1

这不是 Django 问题，纯粹是关于 JavaScript（或应该是）。

以下是您的代码存在的一些问题：

• 在 HTML 中，id 属性在文档中应该是唯一的。您似乎有许多具有相同 ID 的 <a> 标签。使用class 属性，或者更好地使用您自己的数据属性，例如data-table。
• 可以代码使用 Django 模板标签生成 JavaScript，但我认为这是一个坏主意，因为很难推断代码将如何工作。不要在 <script> 块内使用 {% for %}。
• JavaScript 不像 Python 那样在代码块中使用空格。您需要改用大括号{ }。

一旦这些问题得到修复，请使用浏览器中的调试控制台（Firefox 和 Chrome 中的 F12）。它会让你看到任何语法错误，你甚至可以在控制台中运行代码来查看像document.getElementById 这样的东西是如何工作的。