showPDF声明未被读取问题求助：HTML按钮无法触发对应JS函数

核心问题 #

1. 函数未使用报错原因：你在HM.PDFViewer.showPDF方法内部定义了同名的showPDF内部函数，但外层的showPDF方法既没有调用这个内部函数，也没有将其暴露出去，导致外层方法被声明后未执行任何逻辑，触发控制台的"'showPDF' is declared but its value is never read"错误。
2. 按钮点击无响应原因：HTML按钮的onclick中调用的showPDF(this)是全局作用域的函数，但你的实际函数存在于HM.PDFViewer对象的作用域下，全局环境找不到该函数，所以点击按钮无法触发预期逻辑。

修复方案 #

方案1：修正JS结构并修改内联事件 #

调整JavaScript代码，移除不必要的内部嵌套函数，直接将逻辑写在HM.PDFViewer.showPDF方法中：

HM.PDFViewer = 
{
    init: function()
    {
        //---
    },
    showPDF: function(x) {
        x.style.display = "none";
        var embed = document.createElement("EMBED");
        embed.setAttribute("src", "/pdf/Doku.pdf");
        embed.classList.add("size");
        document.body.appendChild(embed);
    },
};

修改HTML按钮的onclick，指定正确的函数作用域：

<button type="button" id="show" onclick="HM.PDFViewer.showPDF(this)" >PDF anzeigen</button>

方案2：使用事件监听绑定（更推荐） #

通过JavaScript绑定事件监听，实现代码解耦：

1. 保持修正后的JavaScript代码（同方案1的JS代码）
2. 修改HTML按钮，移除内联onclick：

<button type="button" id="show">PDF anzeigen</button>

3. 在HM.PDFViewer.init方法中添加事件绑定：

HM.PDFViewer = 
{
    init: function()
    {
        document.getElementById('show').addEventListener('click', function() {
            HM.PDFViewer.showPDF(this);
        });
    },
    showPDF: function(x) {
        x.style.display = "none";
        var embed = document.createElement("EMBED");
        embed.setAttribute("src", "/pdf/Doku.pdf");
        embed.classList.add("size");
        document.body.appendChild(embed);
    },
};

// 调用初始化方法
HM.PDFViewer.init();

以上两种方案都能解决函数未使用的报错，同时让按钮正常触发PDF展示逻辑。

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