document.querySelector('.tab__titles').addEventListener('click', table);

function tabs(e) {
var target=e.target;
if(target.className ==='tab__title') {
var dataTab=target.getAttribute('data-tab');
var tabContent=document.querySelectorAll('.tab__content');
var tabTitle=document.querySelectorAll('.tab__title');
for(var i=0;i<tabTitle.length;i ++) {
tabTitle[i] .classList.remove('is-active');
}
target.classList.add('is-active');
for(var i=0;i<tabContent.length;i ++) {
if(dataTab === i) {<- this cycle always goes to else why?
console.log('BLOCK');
//tabContent[i] .style.display='block';
} else {
//tabContent[i] .style.display='none';
console.log('NONE');
}
}
}
}

5 Answers 5

if(dataTab == i)
Change equality comparison by 2 characters(without typing).
  • I tried the exact same error. – Eager57 Nov 29 '17 at 10:46
  • And what is written in error? – Talented Tarsier Nov 29 '17 at 10:47
  • The error itself is not always just goes to false – Eager57 Nov 29 '17 at 10:48
  • What this returns is:
    var dataTab=target.getAttribute ('data-tab');
    – Talented Tarsier Nov 29 '17 at 10:49
  • This returns the data-tab attribute
    <! - begin tabs -><div class="tab__wrap"><div class="tab__titles"><div class="tab__title is-active" data-tab="0" &​​gt;tab 1 </div><div class="tab__title" data-tab="1">tab 2 </div><div class="tab__title" data-tab="2">tab 3 </div></div><div class="tab__contentes"><div class="tab__content">content 1content 1content 1content 1content 1content 1content 1content 1content 1content 1 </div><div class="tab__content">content 2content 2content 2content 2content 2content 2content 2content 2content 2content 2 </div><div class="tab__content">content 3content 3content 3content 3content 3content 3content 3content 3content 3content 3 </div></div></div><! - end tabs ->
    – Eager57 Nov 29 '17 at 10:50
  • Then it should work.
    And what did you get on the target, didn’t check? Suddenly, the text instead of an element comes?
    – Talented Tarsier Nov 29 '17 at 10:52
  • Everything before the cycle of norms works checked
    if (dataTab === i) {<- in this cycle always goes to else why? Console.log ('BLOCK') ;//tabContent [i] .style.display='block';} else {//tabContent [i] .style.display='none';console.log ('NONE');}
    – Eager57 Nov 29 '17 at 10:55
  • https://jsfiddle.net/ziqq/s78t6td6/ – Eager57 Nov 29 '17 at 11:04
  • Everything works for me - https://jsfiddle.net/mjo27nLb/ – Talented Tarsier Nov 29 '17 at 11:10
  • For greater clarity, I brought the block numbers to the console - https://jsfiddle.net/mjo27nLb/1/ – Talented Tarsier Nov 29 '17 at 11:13
'dataTab === i'=>because it is false
Add elsewhere to not guess what the problem is
console.log(dataTab, i);

What is the output?
Thank you all for the help, the problem was in comparison + cache.
The problem is that getAttribute always pulls out a string, and your variable i is a number.You are trying to compare the number and string