setAttribute sometimes returns null

Question

I have a simple tabbed gallery which I managed to make with setAttribute.

But sometimes when I click in one of my thumbnails, setAttribute returns "null" not always but sometimes it does.

And I'm not understanding why is this happening.

I'll appreciate your help.

here is a link to code: code

and here is my code:

    var tabs = document.querySelector('.tabs');
    var tab = document.querySelectorAll('.tab');
    var showTab = document.querySelector('.showtab');
    var img = document.querySelector('.showtabimg');


    tab.forEach(thumbNail => {
      thumbNail.addEventListener('click', function(item) {

        // delete all active or normal elements active class
        tab.forEach(i => i.classList.remove('active'));

        var content = item.target.getAttribute("src");

        this.classList.toggle('active')

        img.setAttribute('src', content);

      });
    });

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul li{
  list-style: none;
}
.showtab{
  width: 200px;
  height: 100px;
  color: red;
  font-weight: bold;
  display: flex;
  margin-bottom: 20px;
}

.showtab img{
  width: 100%;
}
.tabs{
  display: flex;
}
.tabs li{
  display: flex;
  cursor: pointer;
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
.tabs li img{
  width: 100%;
}

.active{
  opacity: 1 !important;
}

.inActive{
  opacity: .3;
}

<div class="tab-container">
      <div class="showtab active">
        <img class='showtabimg' src="https://images.unsplash.com/photo-1516308354296-1c9c5b561e0b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="showtabimg">
      </div>
      <ul class="tabs">
        <li class="tab tab1 inActive active">
          <img src="https://images.unsplash.com/photo-1516308354296-1c9c5b561e0b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="foto1" class='img '>
        </li>
        <li class="tab tab2 inActive">
          <img src="https://images.unsplash.com/photo-1513346940221-6f673d962e97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="foto2" class='img'>
        </li>
        <li class="tab tab3 inActive">
          <img src="https://images.unsplash.com/photo-1475489991311-e12f9e89705e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80" alt="foto3" class='img'>
        </li>
      </ul>
    </div>

PS: I have read this but it doesn't answer my question.

document.getElementById sometimes returns null

Your title and text suggests `setAttribute` is returning null, but your code does not capture the value of `setAttribute`, but rather `getAttribute`. And it will return null if `item.target` does not have a `src` attribute (e.g., `item.target` is the `li` element rather than the `img`). — Heretic Monkey, Feb 22 '19 at 13:44
[`setAttribute`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) always [returns `undefined`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute#Return_value) (never `null` or other values) — FZs, Feb 22 '19 at 13:48
Regarding `target` and why `getAttribute` returns null sometimes, [What is the exact difference between currentTarget property and target property in javascript](https://stackoverflow.com/q/10086427/215552) is a good read. — Heretic Monkey, Feb 22 '19 at 13:51
@HereticMonkey if you write " console.log(item.target);" it will return the img !? — VenRus, Feb 22 '19 at 13:52
Even when `getAttribute` returns null? And, please [edit] your question so that it makes sense. — Heretic Monkey, Feb 22 '19 at 13:53
@HereticMonkey I'm not understanding you at this point when it's null, it's null! — VenRus, Feb 22 '19 at 14:08
Does `console.log(item.target)` return the `img` when `item.target.getAttribute('src')` returns null? I'm assuming that if you were to write code like `if (item.target.getAttribute('src') == null) { console.log(item.target); }`, it would log something other than an `img` element. — Heretic Monkey, Feb 22 '19 at 14:11

setAttribute sometimes returns null

0 Answers0