CODEWITHSUNDEEP
javascriptjquery
Quesofat
Quesofat

Reputation: 1531

jQuery on click only fires once

I wrote a function to move my slider left and right when an arrow is clicked. The slider works by changing the hash in the url.

Function: 

var navigateGalleryForward = function() {
   var pathName = window.location.href;
   if (pathName.indexOf("item-1") != -1) {
     window.location.hash = "item-2";
   } else if (pathName.indexOf("item-2") != -1) {
     window.location.hash = "item-3";
   } else if (pathName.indexOf("item-3") != -1) {
     window.location.hash = "item-1";
   } else {
     console.log("Something went wrong navigating the gallary..")
   }
 };
 var navigateGalleryBackward = function() {
    var pathName = window.location.href;
    if (pathName.indexOf("item-1") != -1) {
      window.location.hash = "item-3";
    } else if (pathName.indexOf("item-2") != -1) {
      window.location.hash = "item-1";
    } else if (pathName.indexOf("item-3") != -1) {
      window.location.hash = "item-2";
    } else {
      console.log("Something went wrong navigating the gallary..")
    }
  };

$(document).ready(function() {
 $("#left-arrow").on('click', function () {
   console.log("I work");
   navigateGalleryBackward();
 });
 $("#right-arrow").on('click', function () {
   console.log('work');
   navigateGalleryForward();
 });
});

Arrows Example: 

<figure class="item one">
      <img onClick="navigateGalleryBackward" id="left-arrow" src="{{ 'arrow-left.png' | asset_url }}" alt="left">
      <img onclick="navigateGalleryForward" id="right-arrow"src="{{ 'arrow-right.png' | asset_url }}" alt="right">
      <h1 style="color: white; font-weight:bold; font-size: 2rem; margin-top:2em; ">5 New Sensors for Control4</h1>
      <p style="color: white; font-size:1.2rem;">Learn more about Dome's new line of cross-compatible sensors.</p>
      <img style="height: 150px; margin-top: 3em; margin-right: 3em;"class="figure_h" src="{{ 'slide_show_1.jpg' | asset_url }}" />
      <button style="margin-top: 3em; display:block; margin: auto;" class="btn_k">BUY NOW</button>
  </figure>

So on figure one, it works. But on figures two and three it doesn't. After it has fired, it won't fire again.

Figures two and three: 

<figure class="item two">
    <img onClick="navigateGalleryBackward" id="left-arrow" src="{{ 'arrow-left.png' | asset_url}}" alt="left">
    <img onclick="navigateGalleryForward" id="right-arrow" src="{{ 'arrow-right.png' | asset_url }}" alt="right">
    <h1 class="figure_h">2</h1>
  </figure>



    <figure class="item three">
        <img onClick="navigateGalleryBackward" id="left-arrow" src="{{ 'arrow-left.png' | asset_url }}" alt="left">
        <img onclick="navigateGalleryForward" id="right-arrow" src="{{ 'arrow-right.png' | asset_url }}" alt="right">
        <h1 class="figure_h">3</h1>
      </figure>

How can I get this working?

Thank you!

Upvotes: 0

Views: 83

Answers (2)

lkdhruw
lkdhruw

Reputation: 582

HTML element id can not be the same for two or more elements.

Upvotes: 0

Stefano Zanini
Stefano Zanini

Reputation: 5916

Your arrows all have the same ID, try giving them a class instead and using that in your script.

Upvotes: 1

Related Questions