Skip to content
Advertisement

Buttons in slider not working using javascript

I am trying to make a slider for a list of products and I have placed a button on each side of the slider to slide the products. The problem I am facing is that it works fine when I press exactly at the buttons but when I press anywhere around it, it throws the error Uncaught TypeError: Cannot read property ‘style’ of null.

next = (target) => {
  target.parentElement.parentElement.previousElementSibling.style.transform = 'translateX(-44vw)';
  // next[0].style.display = 'none';
  // previous[0].style.display = 'inline-block';
}

previous = (target) => {
  target.parentElement.parentElement.previousElementSibling.style.transform = 'translateX(0vw)';
  // previous[0].style.display = 'none';
  // next[0].style.display = 'inline-block';
}
* {
  font-family: "Segoe UI";
}

.shop {
  background-color: rgb(255, 255, 255);
  overflow: hidden;
  position: relative;
  margin: 10px;
  margin-top: 0;
}

.product-display-area {
  width: 81.5vw;
  display: inline-block;
}

.shop_header {
  margin: 10px;
  margin-bottom: 0px;
  position: relative;
  padding: 10px;
  border-bottom: 1px solid rgb(229, 229, 229);
  background-color: rgb(255, 255, 255);
}

.shop_header h2 {
  display: inline-block;
  font-weight: 500;
  margin-left: 30px;
}

.shop_header p {
  margin-left: 30px;
}

.shop_header .clock {
  display: inline-block;
  margin-left: 30px;
}

.shop_header .clock img {
  position: relative;
  top: 6px;
  width: 24px;
}

.shop_header .clock #time_remaining {
  margin-left: 10px;
}

.shop_header button[type="button"] a {
  text-decoration: none;
  padding: 10px 15px;
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  background-color: rgb(40, 116, 240);
  color: rgb(255, 255, 255);
}

.shop_header button[type="button"] {
  border: none;
  position: absolute;
  right: 20px;
  top: 0px;
}

.shop_items {
  width: 130vw;
  transition: 1s;
}

.shop_items .items {
  display: inline-block;
  padding: 25px;
}

.shop_items .items img {
  display: block;
  margin: auto;
}

.shop_items .items .item_info {
  text-align: center;
  margin: auto;
}

.shop_items .items .item_info p {
  padding: 5px;
  color: rgb(56, 142, 60);
  font-size: 14px;
}

.shop_items .items .item_info p:first-of-type {
  color: rgb(0, 0, 0);
  font-weight: 500;
}

.shop_items .items .item_info p:last-of-type {
  color: rgb(151, 151, 151);
}

.item_carousel_left_arrow {
  position: absolute;
  top: 35%;
  padding: 50px 20px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid rgb(209, 211, 213);
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}

.item_carousel_right_arrow {
  right: 0;
  position: absolute;
  top: 35%;
  padding: 50px 20px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border: 1px solid rgb(209, 211, 213);
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="product-display-area">
  <div class="shop" id="best_of_electronics">
    <div class="shop_header">
      <h2>Best of Electronics</h2>
      <p>Devices and Accessories</p>
      <button type="button"><a href="#">VIEW ALL</a></button>
    </div>
    <div class="shop_items">
      <a href="#">
        <div class="items">
          <div>
            <img src="https://rukminim1.flixcart.com/image/150/150/k4vmxzk0/cases-covers/back-cover/y/y/g/spigen-f23cs25961-original-imafnzhgzuty3gb6.jpeg?q=70">
          </div>
          <div class="item_info">
            <p class="product_name">Best Brands</p>
            <p class="product_price">Shop Now</p>
            <p class="product_company">For All Phone Models</p>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="items">
          <div>
            <img src="https://rukminim1.flixcart.com/image/150/150/kdhphu80/sports-action-camera/j/f/k/4000-air-4k-full-hd-wifi-30m-waterproof-sports-action-camera-original-imafue3ghmhtk39f.jpeg?q=70">
          </div>
          <div class="item_info">
            <p class="product_name">Sports & Action Camera</p>
            <p class="product_price">From ₹4199</p>
            <p class="product_company">GoPro, SJCAM, DJI & more</p>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="items">
          <div>
            <img src="https://rukminim1.flixcart.com/image/150/150/kbqu4cw0/speaker/soundbar/9/s/0/mt160dsb-motorola-original-imaftf6csukur9he.jpeg?q=70">
          </div>
          <div class="item_info">
            <p class="product_name">Dolby Enabled</p>
            <p class="product_price">Up to 50% Off</p>
            <p class="product_company">Home Theaters</p>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="items">
          <div>
            <img src="https://rukminim1.flixcart.com/image/150/150/k6mibgw0/datacard/r/h/g/jiofi-jmr-541-original-imafpfhandhkptwc.jpeg?q=70">
          </div>
          <div class="item_info">
            <p class="product_name">Data Cards</p>
            <p class="product_price">Upto 60% off</p>
            <p class="product_company">JioFi, Huawei & more</p>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="items">
          <div>
            <img src="https://rukminim1.flixcart.com/image/150/150/ja73ki80/webcam/pc-webcam/7/q/e/logitech-c310-original-imaeztzqny7jh7gh.jpeg?q=70">
          </div>
          <div class="item_info">
            <p class="product_name">Webcams</p>
            <p class="product_price">From ₹499</p>
            <p class="product_company">Logitech, Quantum & more</p>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="items">
          <div>
            <img src="https://rukminim1.flixcart.com/image/150/150/kb5eikw0/trimmer/z/d/n/0-5-10-mm-bt3101-15-stainless-steel-cordless-philips-original-imafsjquyq2hapug.jpeg?q=70">
          </div>
          <div class="item_info">
            <p class="product_name">Trimmers & Hair Clippers</p>
            <p class="product_price">From ₹700</p>
            <p class="product_company">By Nova, Philips & more</p>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="items">
          <div>
            <img src="https://rukminim1.flixcart.com/image/150/150/k51cpe80/hearing-aid/e/e/s/ha50-behind-ear-beurer-original-imafnth6bue82ngc.jpeg?q=70">
          </div>
          <div class="item_info">
            <p class="product_name">Best of Hearing Aids</p>
            <p class="product_price">From ₹499</p>
            <p class="product_company">Beurer & more</p>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="items">
          <div>
            <img src="https://rukminim1.flixcart.com/image/150/150/kex5ci80/printer/k/n/z/hp-laserjet-pro-m1136-mfp-original-imafvhnbe2dg4vem.jpeg?q=70">
          </div>
          <div class="item_info">
            <p class="product_name">Top 10 Printers</p>
            <p class="product_price">₹2399</p>
            <p class="product_company">Print, Scan & copy</p>
          </div>
        </div>
      </a>
    </div>
    <div>
      <span class="item_carousel_left_arrow" id="arruw" onclick="previous(event.target)">
                        <i class="fas fa-arrow-left"></i>
                    </span>
      <span class="item_carousel_right_arrow" id="arruw" onclick="next(event.target)">
                        <i class="fas fa-arrow-right"></i>
                    </span>
    </div>
  </div>
</div>

Advertisement

Answer

You need to delegate and test what you clicked since you have two elements you can click, the button and the <i>

Also you have duplicate IDs which is not allowed (had you used them)

Also DRY (don’t repeat yourself)

const shopItems = document.querySelector("#best_of_electronics .shop_items")

document.getElementById("nav").addEventListener("click", function(e) {
  let tgt = e.target;
  let possibleParent = tgt.closest("span")
  if (possibleParent) tgt = possibleParent; // we clicked the <i>
  shopItems.style.transform = tgt.id==="prev" ? 'translateX(-44vw)' : 'translateX(0vw)';
})
* {
  font-family: "Segoe UI";
}

.shop {
  background-color: rgb(255, 255, 255);
  overflow: hidden;
  position: relative;
  margin: 10px;
  margin-top: 0;
}

.product-display-area {
  width: 81.5vw;
  display: inline-block;
}

.shop_header {
  margin: 10px;
  margin-bottom: 0px;
  position: relative;
  padding: 10px;
  border-bottom: 1px solid rgb(229, 229, 229);
  background-color: rgb(255, 255, 255);
}

.shop_header h2 {
  display: inline-block;
  font-weight: 500;
  margin-left: 30px;
}

.shop_header p {
  margin-left: 30px;
}

.shop_header .clock {
  display: inline-block;
  margin-left: 30px;
}

.shop_header .clock img {
  position: relative;
  top: 6px;
  width: 24px;
}

.shop_header .clock #time_remaining {
  margin-left: 10px;
}

.shop_header button[type="button"] a {
  text-decoration: none;
  padding: 10px 15px;
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  background-color: rgb(40, 116, 240);
  color: rgb(255, 255, 255);
}

.shop_header button[type="button"] {
  border: none;
  position: absolute;
  right: 20px;
  top: 0px;
}

.shop_items {
  width: 130vw;
  transition: 1s;
}

.shop_items .items {
  display: inline-block;
  padding: 25px;
}

.shop_items .items img {
  display: block;
  margin: auto;
}

.shop_items .items .item_info {
  text-align: center;
  margin: auto;
}

.shop_items .items .item_info p {
  padding: 5px;
  color: rgb(56, 142, 60);
  font-size: 14px;
}

.shop_items .items .item_info p:first-of-type {
  color: rgb(0, 0, 0);
  font-weight: 500;
}

.shop_items .items .item_info p:last-of-type {
  color: rgb(151, 151, 151);
}

.item_carousel_left_arrow {
  position: absolute;
  top: 35%;
  padding: 50px 20px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid rgb(209, 211, 213);
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}

.item_carousel_right_arrow {
  right: 0;
  position: absolute;
  top: 35%;
  padding: 50px 20px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border: 1px solid rgb(209, 211, 213);
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="product-display-area">
  <div class="shop" id="best_of_electronics">
    <div class="shop_header">
      <h2>Best of Electronics</h2>
      <p>Devices and Accessories</p>
      <button type="button"><a href="#">VIEW ALL</a></button>
    </div>
    <div class="shop_items">
      <a href="#">
        <div class="items">
          <div>
            <img src="https://rukminim1.flixcart.com/image/150/150/k4vmxzk0/cases-covers/back-cover/y/y/g/spigen-f23cs25961-original-imafnzhgzuty3gb6.jpeg?q=70">
          </div>
          <div class="item_info">
            <p class="product_name">Best Brands</p>
            <p class="product_price">Shop Now</p>
            <p class="product_company">For All Phone Models</p>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="items">
          <div>
            <img src="https://rukminim1.flixcart.com/image/150/150/kdhphu80/sports-action-camera/j/f/k/4000-air-4k-full-hd-wifi-30m-waterproof-sports-action-camera-original-imafue3ghmhtk39f.jpeg?q=70">
          </div>
          <div class="item_info">
            <p class="product_name">Sports & Action Camera</p>
            <p class="product_price">From ₹4199</p>
            <p class="product_company">GoPro, SJCAM, DJI & more</p>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="items">
          <div>
            <img src="https://rukminim1.flixcart.com/image/150/150/kbqu4cw0/speaker/soundbar/9/s/0/mt160dsb-motorola-original-imaftf6csukur9he.jpeg?q=70">
          </div>
          <div class="item_info">
            <p class="product_name">Dolby Enabled</p>
            <p class="product_price">Up to 50% Off</p>
            <p class="product_company">Home Theaters</p>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="items">
          <div>
            <img src="https://rukminim1.flixcart.com/image/150/150/k6mibgw0/datacard/r/h/g/jiofi-jmr-541-original-imafpfhandhkptwc.jpeg?q=70">
          </div>
          <div class="item_info">
            <p class="product_name">Data Cards</p>
            <p class="product_price">Upto 60% off</p>
            <p class="product_company">JioFi, Huawei & more</p>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="items">
          <div>
            <img src="https://rukminim1.flixcart.com/image/150/150/ja73ki80/webcam/pc-webcam/7/q/e/logitech-c310-original-imaeztzqny7jh7gh.jpeg?q=70">
          </div>
          <div class="item_info">
            <p class="product_name">Webcams</p>
            <p class="product_price">From ₹499</p>
            <p class="product_company">Logitech, Quantum & more</p>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="items">
          <div>
            <img src="https://rukminim1.flixcart.com/image/150/150/kb5eikw0/trimmer/z/d/n/0-5-10-mm-bt3101-15-stainless-steel-cordless-philips-original-imafsjquyq2hapug.jpeg?q=70">
          </div>
          <div class="item_info">
            <p class="product_name">Trimmers & Hair Clippers</p>
            <p class="product_price">From ₹700</p>
            <p class="product_company">By Nova, Philips & more</p>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="items">
          <div>
            <img src="https://rukminim1.flixcart.com/image/150/150/k51cpe80/hearing-aid/e/e/s/ha50-behind-ear-beurer-original-imafnth6bue82ngc.jpeg?q=70">
          </div>
          <div class="item_info">
            <p class="product_name">Best of Hearing Aids</p>
            <p class="product_price">From ₹499</p>
            <p class="product_company">Beurer & more</p>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="items">
          <div>
            <img src="https://rukminim1.flixcart.com/image/150/150/kex5ci80/printer/k/n/z/hp-laserjet-pro-m1136-mfp-original-imafvhnbe2dg4vem.jpeg?q=70">
          </div>
          <div class="item_info">
            <p class="product_name">Top 10 Printers</p>
            <p class="product_price">₹2399</p>
            <p class="product_company">Print, Scan & copy</p>
          </div>
        </div>
      </a>
    </div>
    <div id="nav">
      <span class="item_carousel_left_arrow arrow" id="prev">
                        <i class="fas fa-arrow-left"></i>
                    </span>
      <span class="item_carousel_right_arrow arrow" id="next">
                        <i class="fas fa-arrow-right"></i>
                    </span>
    </div>
  </div>
</div>

If you must have inline handlers, you can pass (this) – it is the same as event.target and use the saved div

 <span class="item_carousel_left_arrow" id="prev" onclick="nav(this)">
   <i class="fas fa-arrow-left"></i>
 </span>
 <span class="item_carousel_right_arrow" id="next" onclick="nav(this)">
   <i class="fas fa-arrow-right"></i>
 </span>

using

 const shopItems = document.querySelector("#best_of_electronics .shop_items")
 function nav(span) {
   shopItems.style.transform = span.id==="prev" ? 'translateX(-44vw)' : 'translateX(0vw)';
 }
User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement