Good time of day. Please tell me why my js code is not processed by Bitrix `s.

I need that when I press the button, I have one div get display="none" , and another display="block"

I tried through jquery, js and even through bitrix `s functions ... but still it doesn’t work .. I’m too cursed to see. Here is the js code:

 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>

  • For some reason, I didn’t give any errors to this example, but it’s better to check for the presence of styles as in my answer below ... - Air
  • @Air I figured out why it gave an error, it was not related to the code, but the code is still not processed = ( - Full Name LastName
  • Try it, I changed the function call ... - Air
  • @Air nothing happens, no sign of life. ): Maybe I'm doing something wrong? I generally correctly call js? <script type = "text / javascript"> code </ script> - Full Name LastNameDa
  • Sorry, I would be happy to help ... I am not familiar with Bitrix ... Advice, describe the problem in more detail and post the code here ... Not me, others will help ... - Air

1 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>