Bootstrap 5 页脚模态按钮在表单外不起作用

Question

下面是表单（从页面源复制，它是在 Symfony 框架中）

<form name="team" method="post" id="team_form" enctype="multipart/form-data">
    <div class="form-group">
        <label>Image file</label>
        <div class="vich-image"><input type="file" id="team_imageFile_file" name="team[imageFile][file]" class="form-control" /></div>
        <div class="row mt-2">
            <div id="canvas_wrapper">
                <h4>Image Preview</h4>
                <div class="col">
                    <canvas id="canvas">
                    </canvas>
                </div>
                <button type="button" id="btnCrop" class="btn btn-success btn-task btn-block mt-2" data-bs-toggle="modal" data-bs-target="#cropModal">
                    <i class="fas fa-crop" ></i> Crop</button>      
              </div>        
        </div>
    </div>
</form>

<!-- Modal -->
<div class="modal fade" id="cropModal" tabindex="-1" aria-labelledby="cropModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <div class="modal-footer">
                <a class="btn btn-warning" id="btnDownload" form="team_form">Save Image</a>
            </div>
        </div>
    </div>
<!-- Modal End -->

JS

 document.getElementById("btnDownload").addEventListener("click", function () {
                           alert(1);  
)};

虽然我尝试了在其他 stackoverflow 中找到的解决方案。我无法解决它。

Answer 1

在你的 JavaScript 中，你在结尾处放错了 )

尝试下面的代码

 document.getElementById("btnDownload").addEventListener("click", function () {
                           alert(1);  
});