websocket 尝试通过复选框使用户可选择自动滚动文本区域,但工作不一致

lo8azlld  于 2023-03-02  发布在  其他
关注(0)|答案(1)|浏览(162)

我用javascript编写代码,想自动滚动一个textArea,在添加新数据时将滚动条移动到底部。如果我尝试检查复选框是否选中,并基于此启用或禁用该功能,这个功能就可以工作。首先,它似乎可以工作,当复选框选中时自动滚动,当复选框未选中时停止。但是,一旦我取消选中它,它将永远不会再回到自动滚动。而且,即使我不取消选中它,它似乎也会随着时间的推移而失败。对我来说,问题似乎一定与我调用document.getElementById('autoscroll ').checked的部分有关
非常不一致。下面是相关的HTML和JavaScript代码。您能对此提供任何信息将不胜感激。

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="autoscroll" checked>
    <label class="form-check-label" for="autoscroll">Autoscroll</label>
</div>

<script>
    const messageArea = document.getElementById("message-area");
    const filterInput = document.getElementById("filter-input");
    const socket = new WebSocket(`ws://YourWebsocketServer:5000?filename=${filename}`);

    filterInput.addEventListener("input", event => {
            const filterText = event.target.value;
            socket.send(JSON.stringify({ type: "filter", filterText }));
    });

    socket.addEventListener("message", event => {
            const message = event.data;
            messageArea.value = message;
            
            if (document.getElementById('autoscroll').checked === false) {
                messageArea.scrollTop = messageArea.scrollHeight;
            }
    });
</script>
jdgnovmf

jdgnovmf1#

我发现了这个问题,它只是一个错字。
我有以下内容:

if (document.getElementById('autoscroll').checked === false)

并将其替换为

if (document.getElementById('autoscroll').checked === true)

现在起作用了我的错。

相关问题