Не выполняет мой js в bitrix

310

09 декабря 2017, 09:44

Доброго времяни суток. Подскажите пожалуйста почему мой js код не обрабатывается Bitrix`сом.

Мне нужно чтоб при нажатии на кнопку у меня один div получал display="none", а другой display="block"

Я пытался через jquery, js и даже уже через bitrix`совые функции... но все равно не получается.. видать я криворукий слишком. Вот js код :

var b1 = document.getElementById("b1"); 
var d1 = document.getElementById("d1"); 
 
var b2 = document.getElementById("b2"); 
var d2 = document.getElementById("d2"); 
 
  b1.onclick = function(){ 
      if(d1.style.display == 'none'){ 
    d1.style.display = 'block'; 
    d2.style.display = 'none'; 
    }else{ 
      d1.style.display = 'none'; 
      } 
  }; 
   
  b2.onclick = function(){ 
      if(d2.style.display == 'none'){ 
    d2.style.display = 'block'; 
    d1.style.display = 'none'; 
    }else{ 
      d2.style.display = 'none'; 
      } 
  };

#d1 { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #900; 
    background-color:red; 
} 
 
#d2 { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #900; 
    background-color:blue; 
    display:none; 
}

<button id="b1">кнопка 1</button> 
<button id="b2">кнопка 2</button> 
<br /> 
<br /> 
<br /> 
<br /> 
<div id="d1">контент</div> 
 
<div id="d2">контент</div>

Answer 1

var button1 = document.getElementById("button1"); 
var button2 = document.getElementById("button2"); 
 
var div1 = document.getElementById("div1"); 
var div2 = document.getElementById("div2"); 
 
button1.addEventListener('click', openClose); 
button2.addEventListener('click', openClose); 
 
 
function openClose() { 
 
  if ((getComputedStyle(div2).getPropertyValue('display') === "none") && 
    (getComputedStyle(div1).getPropertyValue('display') === "block")) { 
    div2.style.display = 'block'; 
    div1.style.display = 'none'; 
  } else { 
    div2.style.display = 'none'; 
    div1.style.display = 'block'; 
  } 
}

#div1 { 
  width: 100px; 
  height: 100px; 
  border: 1px solid #900; 
  background-color: red; 
  display: block; 
} 
 
#div2 { 
  width: 100px; 
  height: 100px; 
  border: 1px solid #900; 
  background-color: blue; 
  display: none; 
}

<button id="button1">button 1</button> 
<button id="button2">button 2</button> 
<br /> 
<br /> 
<br /> 
<br /> 
<div id="div1">div1</div> 
 
<div id="div2">div2</div>