HTML 页面中的“onClick”事件可以更改 JS 页面上的变量吗？答案

【问题标题】：Can "onClick" events in HTML pages change variables on a JS page?HTML 页面中的“onClick”事件可以更改 JS 页面上的变量吗？
【发布时间】：2020-02-07 06:35:27
【问题描述】：

我在 HTML 页面上有 3 个按钮，我希望每个按钮在单击它们时将我的 scripts.js 中定义的变量更改为指定变量。然后，该变量将触发一个 switch 语句，该语句取决于该变量包含的字符串并打开一个弹出视频。

我尝试添加一个将字符串作为参数的函数，然后该函数重新分配全局变量，然后将该函数添加到onClick 事件中，但单击按钮时该变量永远不会更新。

这是我在 HTML 页面中的按钮：

<button onclick="get_doctor_ID('agrawal')" type="button" class="btn btn-danger mt-3 px-4 open-agrawal">Learn More</button>

<button onclick="get_doctor_ID('looney')" type="button" class="btn btn-danger mt-3 px-4 open-looney">Learn More</button>

<button onclick="get_doctor_ID('cheeks')" class="btn btn-danger mt-3 px-4 open-cheeks">Learn More</button>

这是我的 JS：

var doctorID = 'test'

function get_doctor_ID(ID) {

    doctorID = ID;

}

switch (doctorID) {

    case 'test':

        alert("The statement is working!");

        break;

    case 'index':

        alert("Index Video has been selected!");

        $(document).ready(function() {
            $('.open').click(function() {
                $('.pop-outer').fadeIn('slow')
            })
            $('.closeBackground').click(function() {
                $('.pop-outer').fadeOut('slow');
            })
        });

        break;

    case 'agrawal':

        alert("Agrawal Video has been selected!");

        $(document).ready(function() {
            $('.open-agrawal').click(function() {
                $('.pop-outer').fadeIn('slow')
            })
            $('.closeBackground-agrawal').click(function() {
                $('.pop-outer').fadeOut('slow');
            })
        });

        break;

    case 'looney':

        alert("Looney Video has been selected!");

        $(document).ready(function() {
            $('.open-looney').click(function() {
                $('.pop-outer').fadeIn('slow')
            })
            $('.closeBackground-looney').click(function() {
                $('.pop-outer').fadeOut('slow');
            })
        });

        break;

    case 'cheeks':

        alert("Cheeks Video has been selected!");

        $(document).ready(function() {
            $('.open-cheeks').click(function() {
                $('.pop-outer').fadeIn('slow')
            })
            $('.closeBackground-cheeks').click(function() {
                $('.pop-outer').fadeOut('slow');
            })
        });

        break;
}

我希望当单击按钮时，该函数将运行并更改 doctorID 变量，然后 switch 语句将显示正确的弹出窗口。但是，似乎变量永远不会改变，或者确实改变了，但不会触发 switch 语句。

【问题讨论】：

switch 语句不在函数内部。预计如何重新运行？
由于switch语句不在函数中，所以它只在页面第一次加载时运行一次，不再运行。

标签： jquery scope onclick switch-statement

【解决方案1】：

只是有一个 } 错误，它在 switch 语句之前关闭函数。改成这样：

function get_doctor_ID(ID) {

    doctorID = ID;

} // <-- remove this

我明白了，在开关已经就位后，该功能的正确关闭制动器。所以只需删除那个括号。

【讨论】：

没有那么简单。开关的逻辑是创建事件绑定。照原样，重新执行 switch 语句不会解除先前创建的绑定

【解决方案2】：

我稍微修改了你的 JavaScript 以使用更多的 JQuery。我将所有内容都包装在 document.ready() 中，并从按钮中删除了 onclick 函数，以便在按钮的 id 上有一个 JQuery .on 'click' 选择器。

查看这个 jsfiddle，看看这是否是您正在寻找的功能：https://jsfiddle.net/738wnzjk/1/

希望这能让你朝着正确的方向前进。

【讨论】：