Нажимайте кнопку «Div 1» и спрячьте «Div 2» и нажав одну и ту же кнопку, покажите «Div 2» и скройте «Div 1»?

Question

Я могу сделать эту функциональность с помощью другой кнопки. но я не могу достичь этого при нажатии одной кнопки.

Любые помощь/предложения

Благодаря

Answer 1

• Переключение текущего элемента с использованием ternary-operator
• Использование Element.style.display установить свойство display CSS

var btn = document.getElementById('btn'); 
 
var curr = 'div2'; 
 
btn.onclick = function() { 
 
    document.getElementById(curr).style.display = 'none'; 
 
    curr = curr === 'div2' ? 'div1' : 'div2'; 
 
    document.getElementById(curr).style.display = 'block'; 
 
};

div { 
 
    display: none; 
 
}

<div id="div1">#div1</div> 
 
<div id="div2">#div2</div> 
 
<button id='btn'>Change</button>

Answer 2

Ничего подобного?

function divchange(){ 
 
    div1 = document.getElementById("div1"); 
 
    div2 = document.getElementById("div2"); 
 
    if(div1.style.display == "none"){ 
 
    div1.style.display = "block"; 
 
    div2.style.display = "none"; 
 
    }else{ 
 
    div1.style.display = "none"; 
 
    div2.style.display = "block"; 
 
    } 
 
}

<button id="divchangebutton" onclick="divchange();">test</button> 
 
<div id="div1">asdf</div> 
 
<div id="div2" style="display:none;">qwert</div>

Answer 3

Проблема - Если "дисплей: нет" наборы в CSS, мы не можем получить значение. «elem.style.display» возвращает пустую строку. Мы можем решить его, используя вычисляемый стиль.

 var btn = document.getElementById("btn-toggle"); 
 
     btn.addEventListener("click", function(){ 
 
      var one = document.querySelector(".one"); 
 
      var tow = document.querySelector(".tow"); 
 
      
 
      one.style.display = (getRealDisplay(one) == 'none') ? 'block' : 'none'; 
 
      tow.style.display = (getRealDisplay(tow) == 'none') ? 'block' : 'none'; 
 
     }); 
 
     
 
     // get real value of 'display' property 
 
     function getRealDisplay(elem) { 
 
      if (elem.currentStyle) { 
 
       return elem.currentStyle.display; 
 
      } else if (window.getComputedStyle) { 
 
       var computedStyle = window.getComputedStyle(elem, null); 
 
       return computedStyle.getPropertyValue('display'); 
 
      } 
 
     }

 .one, .tow{ 
 
      width:200px; 
 
      min-height: 200px; 
 
      background-color:burlywood; 
 
     } 
 
     .tow{ 
 
      display: none; 
 
      background-color:cadetblue; 
 
     }

<div class="one">1</div> 
 
    <div class="tow">2</div> 
 
    <button id="btn-toggle">show hide</button>