如何根据唯一 id 显示多个模态

Question

我在后端使用 flask 和 python 来创建一个简单的网页，我试图在点击稍后观看按钮时为每部电影添加一个模式，但是虽然我已经正确地包含了 Javascript 文件，但我得到了这个错误'

Uncaught ReferenceError: openModal is not defined
    at HTMLButtonElement.onclick (trending:299:103)

'

trending.html

`

<div class="temp">
            {% for row_grp in rows %}
                <div class="newsection">
                    {% for row in row_grp%}
                        {% if loop.index0 % 3 == 0 %}
                            <div>
                                <p class="newsp">{{ row_grp[0].category }}</p>
                            </div>
                        {% endif %}
                        <div class="subsec">
                            <div class="imgcontainer">
                                <img src="{{ row.poster }}">
                                <div class="descontainer">
                                    <div>
                                        <h3>{{ row.title }}</h3>
                                    </div>
                                    <div class="newsdet">
                                        <p>Year: {{ row.year }} | Rating: {{row.rating}} </p>
                                    </div>
                                    <div class="newsdet">
                                        <p>Duration: {{ row.duration }} mn</p>
                                    </div>
                                    <div class="newsdet">
                                        <p>Class: {{ row.class }} </p>
                                    </div>
                                    <div class="wlbtn">
                                        <button onclick="openModal('{{ row.trailer }}')" class="watchtrbtn">Watch Trailer</button>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    {% endfor %}
                </div>
            {% endfor %}
        
            {% for row_grp in rows %}
                {% for row in row_grp%}
                    <div id="modal-{{ row.trailer }}" class="modal">
                        <div class="modal-content">
                            <span class="close" onclick="closeModal('{{ row.trailer }}')">&times;</span>
                            <iframe width="560" height="315" src="https://www.youtube.com/embed/{{ row.trailer }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                    </div>
                {% endfor %}
            {% endfor %}

`

trialModal.js

`

document.addEventListener('DOMContentLoaded', function signIn() 
// Thus, The "DOMContentLoaded" event is fired by the browser when the DOM tree has been constructed.
// The addEventListener method is executed when the specified event (DOMContentLoaded) occurs.
{
    function openModal(id) {
        document.getElementById(id).style.display = "block";
      }
      
      function closeModal(id) {
        document.getElementById(id).style.display = "none";
      }
});

`