如何通过点击链接设置JavaScript变量，打开词汇表弹窗指定区域？

你的问题核心是同一个<a>标签不能绑定多个onclick属性，浏览器只会识别第一个，导致WordId赋值代码不会执行，弹窗无法正确定位到对应词汇。以下是具体修复和优化方案：

1. 基础修复：合并onclick逻辑 #

把赋值和调用函数的操作放到同一个onclick里，确保代码按顺序执行：

<a onclick="WordId = 'your-word-id'; BrowserPopupGlossary();">目标词汇</a>

对应的函数可保留原逻辑：

var WordId;
function BrowserPopupGlossary() {
    window.open('glossary.html#' + WordId, 'popUpWindow', 'height=500,width=400');
}

2. 推荐优化：移除全局变量，改用函数参数 #

全局变量容易引发命名冲突或意外覆盖，更严谨的方式是直接把词汇ID作为参数传给弹窗函数：

<a onclick="BrowserPopupGlossary('your-word-id')">目标词汇</a>

修改后的函数无需依赖全局变量，逻辑更清晰：

function BrowserPopupGlossary(wordId) {
    // 校验参数合法性，避免空值导致的错误
    if (!wordId) {
        console.warn('词汇ID不能为空');
        return;
    }
    window.open(`glossary.html#${wordId}`, 'popUpWindow', 'height=500,width=400');
}

3. 额外优化：使用事件绑定替代内联onclick（符合现代前端规范） #

如果项目允许，建议把事件逻辑从HTML中分离，提升代码可维护性：

<a href="#" class="glossary-link" data-word-id="your-word-id">目标词汇</a>

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
    const glossaryLinks = document.querySelectorAll('.glossary-link');
    glossaryLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            // 阻止默认跳转行为
            e.preventDefault();
            const wordId = this.dataset.wordId;
            BrowserPopupGlossary(wordId);
        });
    });
});

function BrowserPopupGlossary(wordId) {
    if (!wordId) {
        console.warn('词汇ID不能为空');
        return;
    }
    window.open(`glossary.html#${wordId}`, 'popUpWindow', 'height=500,width=400');
}

这种方式把HTML结构和JS逻辑分离，便于统一管理所有词汇链接，也更易维护。

内容的提问来源于stack exchange，提问作者aqua21