django 如果元素不在页面上,是否忽略一行Javascript并跳到下一行?

new9mtju  于 2022-12-05  发布在  Go
关注(0)|答案(2)|浏览(105)

在一个django web应用程序上工作,遇到了一个javascript问题。这个web应用程序是多个不同的html页面,所以js代码要搜索的元素出现在一些页面上,但其他页面上没有。如果第二行没有出现在当前页面上,脚本停止运行,最后的函数将不起作用。我有一个“计划”一个页面,您可以在其中向计划添加额外的标记,然后是一个单独的页面来过滤结果。如果我在计划页面上,则“#filterBtn”元素不存在,因此我的createNewTagField函数不起作用。如果我切换这两行代码,相反的情况发生了。我不能让它们都工作,因为javascript搜索的元素在两个不同的页面上,并且不同时出现。
这些是导致问题的线路。

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#mobile-menu').onclick = toggleMobileMenu;
    document.querySelector('#filterBtn').onclick = toggleFiltersMenu;
    document.querySelector('#addTag').onclick = createNewTagField;
    
});

我已经重新排列了代码行,它只是修复了一个页面,而另一个页面仍然有问题。我想它需要像如果空,然后继续到下一行,但还没有能够找到正确的代码从我的搜索。

vpfxa7rd

vpfxa7rd1#

如果您没有超过两个标签/行,那么我会使用try-catch语句来忽略页面上不存在元素的代码行:

try {
// This line of code may throw an error if the element is not found
const element = document.querySelector('.my-element');
// Do something with the element...
} catch (error) {
// If an error is thrown, ignore it and continue with the next line
console.log(error); // Output: Error: The element is not found
}

// This line of code will be executed even if the element is not found
console.log('Element not found. Trying again')

对每个场景执行此操作。

9q78igpj

9q78igpj2#

您可以在JavaScript中检查真实性。https://developer.mozilla.org/en-US/docs/Glossary/Truthy
因为DOM中缺少元素将导致null,所以这样做效果很好,而且可读性很强。

document.addEventListener('DOMContentLoaded', function() {
    
    const mobileMenu = document.querySelector('#mobile-menu');
    const filterBtn = document.querySelector('#filterBtn');
    const addTag = document.querySelector('#addTag');

    if (mobileMenu) mobileMenu.onclick = toggleMobileMenu;
    if (filterBtn) mobileMenu.onclick = toggleFiltersMenu;
    if (addTag) mobileMenu.onclick = createNewTagField;
    
});

相关问题