Могут ли события onClick на страницах HTML изменять переменные на странице JS? - PullRequest
Новая
       9

Могут ли события onClick на страницах HTML изменять переменные на странице JS?

1 голос
/ 10 октября 2019

У меня есть 3 кнопки на странице HTML, и я хочу, чтобы каждая из них меняла переменную, определенную в моем 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.

Ответы [ 2 ]

0 голосов
/ 10 октября 2019

Я немного изменил ваш JavaScript, чтобы использовать больше JQuery. Я обернул все в document.ready() и удалил ваши функции onclick из ваших кнопок, чтобы просто иметь селектор JQuery .on click для идентификаторов кнопок.

Проверьте этот jsfiddle, чтобы увидеть,это то, что вы ищете с точки зрения функциональности: https://jsfiddle.net/738wnzjk/1/

Надеюсь, это поможет вам в правильном направлении.

0 голосов
/ 10 октября 2019

Просто есть неправильное значение }, которое закрывает функцию перед оператором-переключателем . Измените его следующим образом: 

function get_doctor_ID(ID) {

    doctorID = ID;

} // <-- remove this

Правильный закрывающий кронштейн для функции после того, как переключатель уже установлен, я вижу. просто удалите эту скобку.

...