时间戳

首页 > 解决方案 > JavaScript addEventListeners 未从 Web 应用程序的脚本文件运行

javascript - JavaScript addEventListeners 未从 Web 应用程序的脚本文件运行

问题描述

我已经经历了许多关于 JavaScript 中无法运行的 EventListeners 的其他线程，但似乎没有人遇到我目前遇到的问题。

我有一系列按钮，我想在我的网页上触发一些表单，以便在点击时显示。我已经编写了一系列语句来将 eventListeners 添加到按钮（通过元素 ID 选择），它调用了一个将表单的显示切换为 flex 的函数（表单的显示属性在外部 css 文件中设置为 none）点击时（按班级选择）。

添加事件监听器的语句：

document.getElementById("login").addEventListener("click", function(){
    document.querySelector('.login-menu').style.display="flex";
});

document.getElementById("register").addEventListener("click", function(){
    document.querySelector('.reg-menu').style.display="flex";
});

document.getElementById("addTopic").addEventListener("click", function(){
    document.querySelector('.topic-form-container').style.display="flex";
});

document.getElementById("claim-reply-button").addEventListener("click", function(){
    document.querySelector('.reply-to-claimform-container').style.display="flex";
});

document.getElementById("reply-button").addEventListener("click", function(){
    document.querySelector('.reply-to-reply-form-container').style.display="flex";
});

document.getElementById("addClaim").addEventListener("click", function(){
    document.querySelector('.claim-form-container').style.display="flex";
});

前两个按钮（登录和注册）是页面导航栏的按钮，工作正常。但是，由于某种原因，其他事件侦听器无法正常工作。我还通过开发人员窗口中的控制台运行了这些语句，当我这样做时，它添加了 eventListener 并且按钮工作正常。脚本在标签关闭之前被链接，因此脚本不会在 HTML 元素之前加载。

为了简洁起见，这里是没有出现的 HTML 表单。

<div id='topic-form' class='topic-form-container'>
    <form method='POST' id='topic-form' action='/'>
        <label for="title">Title</label>
        <input type='text' 
        id='topic-title'
        name='title'
        size="35 rem"
        placeholder='Enter Topic Title: 200 characters or less'>
        <button type="submit" class="btn btn-primary">Add a topic</button>
    </form>
</div>

<div id="claim-form" class="claim-form-container">
    <form method='POST' id='claim-form' action='/post_claim'>
        <label for="title">Title</label>
        <input type='text'
        id='claim-title'
        name='title'
        size='35 rem'
        placeholder='Enter Claim Title: 200 characters or less'>
        <label for='text-body'>Text Body</label>
        <textarea name='text' rows='4' cols='50' placeholder='Enter description: 500 characters or less'></textarea>
        
        <label for='relation'>Select relation:</label>
        <select name='relation' id='claim-relation'>
            <option value='opposed'>Opposed</option>
            <option value='equivalent'>Equivalent</option>
            <option value='none'>None</option>
        </select>
        
        <button type='submit' class="btn btn-primary">Add a claim</button>
    </form>
</div>

<div id="reply-to-claim-form" class="reply-to-claim-form-container">
    <form method='POST' id='reply-to-claim-form' action='/post_reply'>
        <label for='text-body'>Reply</label>
        <textarea name='text' rows='4' cols='50' placeholder='Enter description: 500 characters or less'></textarea>
        
        <label for='relation'>Select relation:</label>
        <select name='relation'>Select relation
            <option value='clarification'>Clarification</option>
            <option value='support'>Supporting argument</option>
            <option value='counter'>Counterargument</option>
        </select>
        
        <button type='submit' class="btn btn-primary">Reply</button>
    </form>
</div>

<div id="reply-to-reply-form" class="reply-to-reply-form-container">
    <form method='POST' id='reply-to-reply-form' action='/post_reply'>
        <label for='text-body'>Reply</label>
        <textarea name='text' rows='4' cols='50' placeholder='Enter description: 500 characters or less'></textarea>
        
        <label for='relation'>Select relation:</label>
        <select name='relation'>Select relation
            <option value='evidence'>Evidence</option>
            <option value='support'>Support</option>
            <option value='rebuttal'>Rebuttal</option>
        </select>
        
        <button type='submit' class="btn btn-primary">Reply</button>
    </form>
</div>

<script type="text/javascript" 
src="{{ url_for('static', filename='forumScript.js') }}"></script>

此外，为了简洁起见，这里是我添加 eventListeners 的按钮（注意，我在 web 应用程序的某些方面使用 jinja，这些按钮在用户登录时有条件地出现。我正在登录我的 web 时测试这个应用程序。）：

{%if 'username' in session%}<button type="button" id="addClaim">Add a new claim in this topic</button>
{% endif %}

{% if 'username' in session %}<div class='claim-list-reply'><button type=button id='claim-reply-button'>Reply to claim</button></div> {% endif %}

{% if 'username' in session%}<button type="button" id="addTopic">Add a new topic</button>{% endif %}

{% if 'username' in session %}<button type='button' id='reply-button'>Reply</button>{% endif %}

为了清楚起见，这些按钮包含在一个

  • 标签（在标签内），但我认为这不会影响任何事情。我已经为此绞尽脑汁了好几个小时，上网查看，与其他编写代码的朋友交谈，但我终其一生都无法诊断出这个问题。

    非常感谢。

    • 标签： javascripthtmljinja2

    解决方案

    我能够在我自己的一个 Flask 应用程序中复制您的代码来测试它（使用与我的应用程序相关的不同 Jinja if 语句）并让它工作。我注意到了几件事：

    • 在您之前的评论之一中，您的文件名是，'forumIndexScript.js'但在您编辑的问题中，文件名是'forumScript.js'如此仔细检查以确保准确性。

    • 您可能还想检查您的文件是否在静态文件夹中并且没有嵌套，或者如果是则更新脚本的源代码。我假设其他文件通过您的 url_for('static') 路径正确加载，因为您提到了 CSS 文件。根据您提供的内容，很难判断这是否是 CSS 问题，例如另一个文件/元素/类/样式冲突。

    顺便说一句，.reply-to-**claimform**-container您的 JS 代码中也有一个错字，但这不应该影响其他代码。我希望这会有所帮助，如果没有，您会找到解决方案！

    推荐阅读