Vfrdtyky

I'm pretty new to JavaScript and jQuery, and I could really use some help here.

I have a click event and a keyup event, where the keyup event should only be available if the click event has happened.

I have a series of images, each of which, when clicked, should trigger a modal image.

<!-- Images -->

<div class="col1">

    <!-- Trigger the Modal -->

    <img class="storyboardImg" id="1" src="storyboard-1.jpg"></img>

</div>

<div class="col1">

    <img class="storyboardImg" id="2" src="storyboard-1.jpg"></img>

</div>

<div class="col1">

    <img class="storyboardImg" id="3" src="storyboard-1.jpg"></img>

</div>





<!-- The Modals -->

<div id="storyboardModal" class="modal">

    <!-- The Close Function -->

    <span class="closeModal" onclick=

    "document.getElementById('storyboardModal').style.display='none'"> 

    x&times;</span>

    <!-- Modal Content (The Image) -->

    <img class="modal-content" id="img01">

    <!-- Modal Caption (Image Text) -->

    <div id="caption"></div>

</div>

When the modal image is activated by the click event in JS below, only then it should allow navigating to the previous and next images in the series using the left and right arrow keys on the keyboard (which should be made available with the keyup function).

I have tried introducing a variable called "modalActive", which is set to "0" by default, and as part of the click event, this variable should be assigned a new value of "1". The idea is that the keyup event should only be available when the value of "modalActive" is "1", as shown below. However, it doesn't seem to read the keyup function, when the variable value is "1".

<script>

var modal = document.getElementById('storyboardModal');



var img = $('.storyboardImg');

var modalImg = $("#img01");

var captionText = document.getElementById("caption");



var currentId = null;

var modalActive = "0";



$('.storyboardImg').click(function(){

    var id = this.getAttribute("id");

    currentId = id;

    modal.style.display = "block";

    captionText.innerHTML = this.alt;

    var newSrc = this.src;

    modalImg.attr('src', newSrc);

    modalActive = "1";

})



if (modalActive == "1") {

$(document).on("keyup", function (e) {

    // Left Arrow Key

    if (e.which===37 && currentId <= 1) {

    document.getElementById('storyboardModal').style.display='none';

        modalActive = null;

    } 

    else if (e.which === 37 && currentId > 1) {

        currentId--;

        $(".modal").fadeOut(300);

        //$("#storyboardModal" + currentId).fadeIn(300);    

        modal.style.display = "block";

        var newSrc1 = document.getElementById(currentId).src;

        modalImg.attr('src', newSrc1);

        captionText.innerHTML = this.alt;

    } 

    // Right Arrow Key

    else if (e.which === 39 && currentId >= 6) {



    document.getElementById('storyboardModal').style.display='none';

        modalActive = null;

    } 

    else if (e.which === 39 && currentId < 6) {

        currentId++;

        $(".modal").fadeOut(300);

        modal.style.display = "block";

        var newSrc2 = document.getElementById(currentId).src;

        modalImg.attr('src', newSrc2);

        captionText.innerHTML = this.alt;



    }

});

}



/***** close Modal *****/



var span = document.getElementsByClassName("closeModal")[0];



// When the user clicks on <span> (x), close the modal

span.onclick = function() {

   modalActive = null;

   $(".modal").fadeOut(300);

}

</script>

It seems like the variable "modalActive" is not getting assigned the new value in the click event. Could someone please point out what I'm doing wrong here?.

To get your code working, you should move the modalActive check to inside your keyup function declaration

$(document).on("keyup", function (e) {

  if (modalActive == "1") {

    // Left Arrow Key

    if (e.which===37 && currentId <= 1) {

      ...

The reason your code fails is that the code inside the <script> tag is executed only once (on page load) and by that time, the modalActive is false and your keyup event will not be registered and never executed.
With this change, the event will be registered on page load and the check wether to act on it is instead inside the event function.