Javascript показать элемент по клику

Question

Я пытаюсь сделать это без Jquery. Я хочу показать div при нажатии на триггер. Пока у меня есть это, чтобы скрыть элемент.

 document.getElementById('element').style.display = 'none';

HTML ..

<div class="element">Ahem, boo!!</div>
<a href="#" id="showDiv">Show</a>

Как мне создать функцию для отображения div при нажатии на ссылку? Я хотел бы избежать использования таких функций, как onclick="showDiv() в самой ссылке.

Answer 1

document.getElementById('showDiv').onclick=function(){
  // Remove any element-specific value, falling back to stylesheets
  document.getElementById('element').style.display='';
};

Answer 2

Возможно полностью подключить обработчики событий в JavaScript. Пример:

document.getElementById('showDiv').onclick = function() {
    // Do whatever now that the user has clicked the link.
};

Чтобы отменить эффект первой строки кода, который вы разместили, вы можете использовать:

document.getElementById('element').style.display = 'block'; // or
document.getElementById('element').style.display = '';

Answer 3

Добавьте это к сценарию:

function myFunction() {

            var btn = document.getElementById("myButton");
            //to make it fancier
            if (btn.value == "Click To Open") {
                btn.value = "Click To Close";
                btn.innerHTML = "Click To Close";
            }
            else {
                btn.value = "Click To Open";
                btn.innerHTML = "Click To Open";
            }
            //this is what you're looking for
            var x = document.getElementById("myDIV");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

и отредактируйте кнопку и div:

<button onclick="myFunction()" id="myButton" value="Click To Open Instructions">Click To Open Instructions</button>

 <div style="display:none;" id="myDIV">
</div>