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

Question

我在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语句。

Answer 1

简单地有一个}错误，它在开关声明前关闭功能。像这样更改它：

function get_doctor_ID(ID) {

    doctorID = ID;

} // <-- remove this

我已经知道，在开关已经就位后，该功能的正确闭合制动器。因此只需删除该括号即可。

Answer 2

我稍微修改了JavaScript，以使用更多的JQuery。我将所有内容包装在document.ready()中，并从按钮中删除了onclick函数，只在按钮ID上使用了JQuery单击选择器。

查看此jsfiddle，以查看其是否在功能方面正在寻找：https://jsfiddle.net/738wnzjk/1/