JavaScript函数在Django上不起作用

Question

When the first page is loaded, I want the user to come across all the music, but if he selects a list from RadioButton, I only want the music in that list, but the javascript function doesn't work.

Let me add that I don't normally know JavaScript, but I need to use it.

<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

This isn't a Django issue, it's purely about the JavaScript (or should be).

Here are some problems with your code:

• In HTML, the id attribute should be unique in the document. You seem to have many <a> tags with the same id. Use the class attribute, or even better use your own data attribute like data-table .
• You can code generate JavaScript using Django template tags like you have, but I think it's a bad idea because it's very hard to reason about how the code will work. Don't use {% for %} inside the <script> block.
• JavaScript doesn't use spaces for code blocks like Python does. You need to use braces { } instead.

Once those things are fixed, use the debugging console in your browser (F12 in Firefox and Chrome). It will let you see any syntax errors, and you can even run code in the console to see how things like document.getElementById work.