Question

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

我有一系列按钮，我想在我的网页上触发一些表单，以便在单击时显示。我写了一系列的语句来给按钮添加eventListeners（由元素ID选择），它调用了一个函数，将表单的显示切换到flex（在外部css文件中表单的display属性设置为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";
});

前两个按钮（登录和注册），它们是页面导航栏的按钮，工作正常。但是，由于某种原因，其他 eventListeners 无法正常工作。我还通过开发人员窗口中的控制台运行了语句，当我这样做时，它添加了 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，这些按钮在用户登录时有条件地出现。我在登录时测试这个进入我的网络应用程序。）：

{%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 %}

明确地说，这些按钮包含在一个

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

非常感谢。

Answer 1

我能够在我自己的一个 Flask 应用程序中复制您的代码以对其进行测试（使用与我的应用程序相关的不同 Jinja if 语句）并使其正常工作。我注意到的一些事情：

在您之前的评论之一中，您的文件名是 'forumIndexScript.js'，但在您编辑的问题中，文件名是 'forumScript.js'，因此请仔细检查其准确性。
您可能还想检查您的文件是否在静态文件夹中并且没有嵌套，如果是，则更新脚本的源。我假设其他文件通过您的 url_for('static') 路径正确加载，因为您提到了 CSS 文件。根据您提供的内容，很难判断这是否可能是 CSS 问题，例如另一个文件/元素/类/样式冲突。

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

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

1 个答案: